@import "fonts/fonts";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import 'components/_button.css';
@import 'components/_select.css';
@import "tailwindcss/utilities";


@layer base {
    body {
        @apply font-sans text-base antialiased;
    }

    .hidden-scroll::-webkit-scrollbar {
        display: none;
    }

    .basket {
        .collapsed {
            max-height: 0;
        }
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .hidden-scroll {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .sticky .basket {
        max-height: 100%;
        overflow-y: auto;
    }
    @media screen and (min-width: 768px) and (max-height: 600px) {
        .basket__total {
            margin-top: 20px
        }
    }

    ::-webkit-calendar-picker-indicator {
        filter: invert(43%) sepia(65%) saturate(929%) hue-rotate(121deg) brightness(97%) contrast(101%);
    }
}

/* floating label */
.anim-label {
    @apply absolute top-0 transform translate-y-0 transition-all duration-300;

    input:focus ~ & {
        @apply -translate-y-6.5;
    }

    input:not(:placeholder-shown) ~ & {
        @apply -translate-y-6.5;
    }
}

/* custom checkbox */
.custom-checkbox {
    @apply flex relative;

    [type="checkbox"] {
        @apply outline-none opacity-0 absolute w-1 h-1 left-0 top-0;

        &:checked {
            ~ .fake-checkbox {
                svg {
                    @apply opacity-100;
                }
            }
        }
    }

    .fake-checkbox {
        @apply flex flex-shrink-0 items-center justify-center mr-2 text-green-500 border border-green-500 w-4 h-4;

        svg {
            @apply opacity-0;
        }
    }
}

.ReactCollapse--collapse {
    @apply transition-all duration-500;
}

.has-basket {
    ~ .footer {
        @apply mb-[150px];

        @screen md {
            @apply mb-[270px];
        }

        @screen lg {
            @apply mb-0;
        }
    }
}

[type="date"] {
    ~ .field-state {
        @apply right-10;
    }
}