@layer components {
    .grid-view {
        @apply flex flex-wrap py-2 justify-start;
    }

    .grid-view a,.grid-view > a > div > div {
        @apply m-2 flex flex-col items-center justify-center
    }

    .grid-view time {
        @apply hidden;
    }

    .grid-view .item_name {
        @apply w-[135px];
    }

    .grid-view .info {
        @apply text-center;
    }

    .grid-view .square {
        @apply w-24 h-24 ;
    }

    .grid-view .square .svg-icon-wrapper {
        @apply !w-16 !h-24;
    }

    .list-view .square {
        @apply w-12 h-12;
    }

    .list-view .square .svg-icon-wrapper {
        @apply !w-10 !h-10;
    }

    .square > div {
        @apply w-full h-full bg-cover bg-center bg-no-repeat;
    }

    .grid-view .mime-icon::before {
        @apply top-[calc(45%-1rem)];
        /* font-size: 2rem; */
      }

    .list-view .mime-icon .ico::before {
        @apply top-[calc(45%-.5rem)];
        /* font-size: 1rem; */
    }

    .mime-icon .ico {
        @apply w-full h-full inline-flex items-center justify-center;
    }

    .grid-view .mime-icon .ico:after {
        @apply !w-full !h-full;
    }

    .grid-view .square, .list-view .square{
        @apply relative;
    }

    .grid-view .square::before, .list-view .square::before{
        @apply !z-[10] !right-[4px] !bottom-[-3px] absolute;
    }
}