path: root/src/styles/globals.css

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

#__next main {
    @apply min-h-screen
}

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-white
            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-out
        duration-200;
}

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