path: root/src/styles/globals.css

@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-2
            py-2
            rounded
            w-fit;
    }

    .badge-red {
        @apply bg-danger-100
            text-danger-600;
    }

    .badge-solid-red {
        @apply bg-danger-500
            text-white;
    }

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

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

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

    .badge-green {
        @apply bg-success-100
            text-success-600;
    }

    .badge-solid-green {
        @apply bg-success-500
            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-warning-500
            disabled:bg-gray_r-5;
    }

    .form-input[aria-invalid='true'] {
        @apply border-danger-500
            focus:border-danger-500;
    }

    .form-input[type='file'] {
        @apply py-2;
    }

    .form-msg-danger {
        @apply text-danger-600 mt-2 block text-sm;
    }

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

    .btn-yellow {
        @apply bg-warning-500
            border-warning-500
            hover:bg-warning-500/80
            disabled:text-gray_r-10
            disabled:bg-warning-200
            disabled:border-warning-200;
    }

    .btn-red {
        @apply bg-danger-100
            border-danger-300
            text-danger-500
            disabled:text-danger-400
            disabled:bg-danger-200;
    }

    .btn-solid-red {
        @apply bg-danger-500
            border-danger-500
            text-gray_r-1
            hover:bg-danger-500/80
            disabled:text-gray_r-1
            disabled:bg-danger-200
            disabled:border-danger-200;
    }

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

    .product__description {
        @apply text-gray_r-12/90;
    }

    .product__description br {
        @apply block my-1;
    }

    .product__description b {
        @apply font-semibold;
    }
}

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

.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-warning-500
        bg-warning-500
        hover:bg-warning-500;
}

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

.table-specification {
    @apply max-h-[500px] overflow-y-auto border border-gray_r-6;
}

.table-specification > table {
    @apply table-auto
        border-collapse
        w-full;
}

.table-specification > table > thead > tr > th:last-child {
    @apply w-3/12;
}

.table-specification > table > thead {
    @apply sticky top-0 border-b;
}

.table-specification > table > thead > tr {
    @apply bg-gray_r-1/80 backdrop-blur-lg;
}

.table-specification th {
    @apply font-semibold;
}

.table-specification th,
.table-specification td {
    @apply p-4 text-center;
}

.table-specification > table > tbody > tr {
    @apply odd:bg-gray_r-3 even:bg-gray_r-1;
}

.table-cart,
.table-checkout {
    @apply w-full
        table-auto
        border-collapse;
}

.table-cart tr,
.table-checkout tr {
    @apply border-y 
        border-gray_r-6
        first:border-t-0;
}

.table-cart th,
.table-cart td,
.table-checkout th,
.table-checkout td {
    @apply py-4
        px-3
        text-center
        text-gray_r-12/90;
}

.table-cart th,
.table-cart td {
    @apply first:w-12;
}

.table-cart th,
.table-checkout th {
    @apply font-medium;
}

.table-data {
    @apply w-full
    table-auto
    border-collapse;
}

.table-data thead tr {
    @apply bg-gray_r-3;
}

.table-data thead th {
    @apply font-medium whitespace-nowrap;
}

.table-data thead th,
.table-data tbody td {
    @apply px-3 
        py-4
        text-center;
}

.table-data tbody td {
    @apply text-gray_r-12/90;
}

.table-data tbody tr {
    @apply border-b
        border-gray_r-6;
}

.navbar-user-dropdown-button {
    @apply flex-1
        flex
        gap-x-2
        p-4
        items-center
        bg-danger-500
        font-medium
        !text-gray_r-1
        rounded-none
        rounded-t-xl;
}

.navbar-user-dropdown-button span {
    @apply line-clamp-1;
}

.navbar-user-dropdown-wrapper a,
.navbar-user-dropdown-wrapper button {
    @apply text-gray_r-12/80 hover:bg-gray_r-5 font-medium py-2 px-4 w-full text-left;
}

.navbar-user-dropdown {
    @apply bg-white
        border
        border-gray_r-6
        py-2
        w-full
        shadow;
}

.category-mega-box-wrapper,
.navbar-user-dropdown-wrapper {
    @apply absolute
        opacity-0
        left-0
        top-[125%]
        flex
        w-full
        z-10
        transition-all
        ease-in
        duration-200
        pointer-events-none
        text-left;
}

.category-mega-box-wrapper.show,
.navbar-user-dropdown-button:hover ~ .navbar-user-dropdown-wrapper,
.navbar-user-dropdown-wrapper:hover {
    @apply top-[100%]
        opacity-100
        pointer-events-auto;
}

.category-mega-box {
    @apply relative
        py-2
        border
        border-t-0
        bg-white
        border-gray_r-6
        h-full
        w-full;
}

.category-mega-box > div {
    @apply text-gray_r-12/80;
}

.category-mega-box > div:hover .category-mega-box__parent {
    @apply bg-gray_r-5
    w-full;
}

.category-mega-box > div:hover .category-mega-box__child-wrapper {
    @apply opacity-100
        top-0
        pointer-events-auto;
}

.category-mega-box .category-mega-box__parent {
    @apply py-2.5
        px-4
        text-gray_r-12/80
        font-normal;
}

.category-mega-box__child-wrapper {
    @apply absolute 
        left-[100%] 
        top-12
        bg-gray_r-1/90
        backdrop-blur-md
        border 
        border-gray_r-6 
        p-6
        opacity-0
        h-full 
        transition-all
        ease-in
        duration-200
        pointer-events-none
        z-50;
}

.category-mega-box__child-one {
    @apply text-gray_r-12/80 
        hover:text-danger-500 
        transition-colors 
        ease-linear 
        duration-100 
        w-fit
        font-semibold;
}

.category-mega-box__child-two {
    @apply text-gray_r-12/80 
        hover:text-danger-500 
        transition-colors 
        ease-linear 
        duration-100 
        w-full
        font-normal;
}

@keyframes page-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.page-loader {
    animation-name: page-loader;
    animation-duration: 1000ms;
    animation-delay: 50ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    10%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    80% {
        transform: translateX(10px);
    }
    30%,
    50%,
    70% {
        transform: translateX(-10px);
    }
    40%,
    60% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

.blink-color-flash-sale {
    @apply text-body-1 md:text-title-sm;
    transform: rotateY(180deg) rotateZ(120deg);
    animation-name: blink-color-flash-sale;
    animation-duration: 300ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes blink-color-flash-sale {
    from {
        @apply text-danger-500;
    }
    to {
        @apply text-warning-500;
    }
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
.status-swiper {
  width: 100%;
  height: 100%;
}

.status-swiper .swiper-slide {
  width: auto !important;
}