@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;

* {
    -webkit-tap-highlight-color: transparent;
}

html, body {
    @apply 
        w-screen
        text-body-2
        text-gray_r-12
        bg-gray_r-1
        overflow-x-clip
    ;
}

button {
    @apply block;
}

@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;
    }
}

@layer components {
    .badge-red,
    .badge-solid-red,
    .badge-gray,
    .badge-yellow,
    .badge-blue,
    .badge-green,
    .badge-solid-green {
        @apply
            text-[11px]
            leading-none
            font-medium
            px-1
            py-1
            rounded
            w-fit
        ;
    }

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

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

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

    .badge-yellow {
        @apply
            bg-yellow_r-3
            text-yellow_r-11
        ;
    }

    .badge-blue {
        @apply
            bg-blue-200
            text-blue-600
        ;
    }

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

    .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:border-yellow_r-9
            disabled:bg-gray_r-5
        ;
    }

    .form-input[aria-invalid] {
        @apply
            border-red_r-10
            focus:border-red_r-10
        ;
    }

    .btn-yellow,
    .btn-light,
    .btn-red,
    .btn-solid-red,
    .btn-green {
        @apply
            block
            w-fit
            py-3
            px-6
            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-solid-red {
        @apply 
            bg-red_r-11
            border-red_r-11
            text-gray_r-1
            disabled:text-gray_r-1
            disabled:bg-red_r-8
            disabled:border-red_r-8
        ;
    }

    .btn-green {
        @apply 
            bg-green_r-3
            border-green_r-6
            text-green_r-11
            disabled:text-green_r-10
            disabled:bg-green_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-3
            shadow
            bg-white
            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
        ;
    }

    .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;
}

.overlay {
    @apply
        fixed
        top-0
        left-0
        w-full
        h-full
        z-[55]
        bg-gray_r-12/40
    ;
}

.sticky-header {
    @apply
        px-4
        py-3
        bg-gray_r-1/90
        backdrop-blur-lg
        sticky
        top-0
        border-b
        border-gray_r-7
        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-red_r-11;
}

.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
    ;
}

.form-select__placeholder {
    @apply
        !text-gray_r-9
    ;
}

.form-select__control {
    @apply
        !shadow-none
        !border-gray_r-7
    ;
}

.form-select__control--menu-is-open {
    @apply
        !border-yellow_r-9
    ;
}