@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
    @apply 
        w-screen
        text-base
        text-gray-900
        bg-gray-50
    ;
}

@layer base {
    h1, .h1 {
        @apply
            text-lg
            font-semibold
            text-gray-900
        ;
    }

    a {
        @apply 
            font-medium
            text-yellow-900
        ;
    }
}

@layer components {
    .badge-red,
    .badge-yellow,
    .badge-green {
        @apply
            text-xs
            font-medium
            px-1
            py-0.5
            rounded
            w-fit
        ;
    }

    .badge-red {
        @apply
            bg-red-300
            text-red-900
        ;
    }

    .badge-yellow {
        @apply
            bg-yellow-300
            text-yellow-900
        ;
    }

    .badge-green {
        @apply
            bg-green-200 
            text-green-700
        ;
    }

    .form-label {
        @apply
            text-sm
            mb-1
            block
        ;
    }

    .form-input {
        @apply 
            p-3
            rounded
            border
            border-gray-300
            bg-transparent
            w-full
            leading-none
            focus:outline-none
        ;
    }

    .btn-yellow {
        @apply 
            block
            w-fit
            p-3
            bg-yellow-900
            border-yellow-900
            rounded
            border
            text-gray-900
            text-center
            disabled:text-gray-700
            disabled:bg-yellow-700
            disabled:border-yellow-700
            ease-linear
            duration-150
        ;
    }

    .btn-light {
        @apply 
            block
            w-fit
            p-3
            bg-gray-100
            border-gray-300
            rounded
            border
            text-gray-900
            text-center
        ;
    }

    .product-card {
        @apply
            w-full
            h-full
            border
            border-gray-300
            rounded
            relative
            flex
            flex-col
        ;
    }

    .product-card__image {
        @apply
            w-full
            h-[160px]
            object-contain
            object-center
            border-b
            border-gray-300
        ;
    }

    .product-card__description {
        @apply
            p-2
            pb-3
            flex-1
            bg-white
        ;
    }

    .product-card__title {
        @apply
            text-sm
            text-gray-900
        ;
    }

    .product-card__brand {
        @apply text-sm;
    }
}

@layer utilities {
    .wrap-line-ellipsis-1,
    .wrap-line-ellipsis-2,
    .wrap-line-ellipsis-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wrap-line-ellipsis-1 {
        -webkit-line-clamp: 1;
    }

    .wrap-line-ellipsis-2 {
        -webkit-line-clamp: 2;
    }
    
    .wrap-line-ellipsis-3 {
        -webkit-line-clamp: 3;
    }
}

.menu-wrapper {
    @apply
        fixed
        top-0
        left-0
        bg-white
        w-[80%]
        h-full
        z-[60]
        overflow-y-auto
        translate-x-[-100%]
        ease-linear
        duration-150
    ;
}

.menu-wrapper.active{
    @apply translate-x-0;
}

.menu-overlay {
    @apply
        fixed
        top-0
        left-0
        w-full
        h-full
        z-[55]
        bg-gray-900/60
    ;
}

.sticky-header {
    @apply
        px-4
        py-3
        bg-white
        border-b
        sticky
        top-0
        shadow
        z-50
    ;
}

.content-container {
    @apply 
        max-w-full
        overflow-x-hidden
    ;
}

#indoteknik_toast {
    @apply
        fixed
        bottom-4
        translate-y-[200%]
        left-[50%]
        translate-x-[-50%]
        z-[100]
        flex
        items-center
        p-4
        mb-4
        w-[90%]
        text-gray-500
        bg-white
        border
        border-gray-300
        rounded-lg
        shadow
        ease-linear
        duration-300
    ;
}

#indoteknik_toast.active {
    @apply translate-y-0;
}

.category-menu {
    @apply hidden;
}

.swiper-slide {
    @apply !h-auto;
}

.lazy-load-image-background {
    @apply !block;
}

.swiper-pagination-bullet-active {
    @apply !bg-yellow-900;
}

.pagination {
    @apply
        flex
        justify-center
        gap-x-1
    ;
}

.pagination-item {
    @apply 
        p-1
        flex
        justify-center
        items-center
        w-10
        rounded 
        ease-linear 
        duration-150 
        border
        border-gray-300
        bg-gray-100 
        hover:bg-gray-300 
        text-gray-800
    ;
}

.pagination-item--active {
    @apply 
        border-yellow-900
        bg-yellow-900
        hover:bg-yellow-900
        text-gray-900
    ;
}

.pagination-dots {
    @apply
        p-1
        flex
        justify-center
        items-end
        w-10
        rounded 
        ease-linear 
        bg-gray-100
        text-sm
    ;
}