@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-body-2
        text-gray_r-12
        bg-gray_r-1
    ;
}

@layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance:textfield;
    }

    h1, .h1 {
        @apply
            text-h-md
            font-semibold
        ;
    }

    h2, .h2 {
        @apply
            text-body-2
            font-semibold
            leading-6
        ;
    }

    a {
        @apply 
            font-medium
            text-yellow_r-11
        ;
    }
}

@layer components {
    .badge-red,
    .badge-gray,
    .badge-yellow,
    .badge-green {
        @apply
            text-caption-2
            leading-none
            font-medium
            px-1
            py-1
            rounded
            w-fit
        ;
    }

    .badge-red {
        @apply
            bg-red_r-5
            text-red_r-10
        ;
    }

    .badge-gray {
        @apply
            bg-gray_r-5
            text-gray_r-10
        ;
    }

    .badge-yellow {
        @apply
            bg-yellow_r-5
            text-yellow_r-10
        ;
    }

    .badge-green {
        @apply
            bg-green_r-5
            text-green_r-10
        ;
    }

    .form-label {
        @apply
            font-medium
            block
        ;
    }

    .form-input {
        @apply 
            p-3
            rounded
            border
            text-gray_r-12
            border-gray_r-7
            bg-transparent
            w-full
            leading-none
            focus:outline-none
            focus:ring-1 
            focus:ring-yellow_r-9
        ;
    }

    .btn-yellow,
    .btn-light,
    .btn-red {
        @apply
            block
            w-fit
            p-3
            rounded
            border
            text-center
            font-medium
            ease-linear
            duration-150
        ;
    }

    .btn-yellow {
        @apply 
            bg-yellow_r-9
            border-yellow_r-9
            disabled:text-gray_r-10
            disabled:bg-yellow_r-7
            disabled:border-yellow_r-7
        ;
    }

    .btn-red {
        @apply 
            bg-red_r-3
            border-red_r-6
            text-red_r-11
            disabled:text-red_r-10
            disabled:bg-red_r-6
        ;
    }

    .btn-light {
        @apply 
            bg-gray_r-3
            border-gray_r-6
            disabled:text-gray_r-10
            disabled:bg-gray_r-6
        ;
    }

    .product-card {
        @apply
            w-full
            h-full
            border
            border-gray_r-6
            bg-gray_r-2
            rounded
            relative
            flex
            flex-col
        ;
    }

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

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

    .product-card__title {
        @apply
            text-caption-1
            text-gray_r-12
            leading-5
        ;
    }

    .product-card__brand {
        @apply 
            text-caption-1
            mb-1
            block
        ;
    }
}

@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_r-12/60
    ;
}

.sticky-header {
    @apply
        px-4
        py-3
        bg-white
        border-b
        border-gray-300
        sticky
        top-0
        shadow-sm
        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
        w-full
    ;
}

.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_r-6
        bg-gray_r-3
        hover:bg-gray_r-5 
        text-gray_r-12
    ;
}

.pagination-item--active {
    @apply 
        border-yellow_r-9
        bg-yellow_r-9
    ;
}

.pagination-dots {
    @apply
        p-1
        flex
        justify-center
        items-end
        w-10
        rounded 
        ease-linear 
        bg-gray_r-3
        text-caption-2
    ;
}

.idt-transition {
    @apply
        transition-all
        ease-linear
        duration-300
    ;
}