/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none !important;
}

html {
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    color: #2c393e;
}

.shadow-scroll-x {
    overflow-x: auto;
    background-color: white;
    background-image: linear-gradient(to right, white 0%, white 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, white 0%, white 50%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-position: left center,
    right center,
    left center,
    right center;
    background-size: 10px 100%,
    10px 100%,
    10px 100%,
    10px 100%;
    -webkit-overflow-scrolling: touch;
}

.shadow-scroll-x::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background-color: white;
}

.shadow-scroll-x::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 5px;
    visibility: hidden;
    border: 2px solid white;
}

.shadow-scroll-x:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.shadow-scroll-x::-webkit-scrollbar-button {
    display: none;
}

.custom-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #e0e0e0 transparent;
}

/* Webkit (Chrome, Edge, Safari) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 5px;
    border: 2px solid white;
    visibility: hidden;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.input-validation-error {
    @apply border-dekodiRed800 focus:border-dekodiRed800 active:border-dekodiRed800 focus:ring-0 !important;
}

@layer base {
    input,
    textarea,
    select {
        @apply appearance-none !border-gray-300 !rounded;
    }

    input:focus,
    textarea:focus {
        @apply outline-none ring-0 !border-gray-500;
        box-shadow: none !important;
    }

    input:focus-visible,
    textarea:focus-visible {
        @apply outline-none;
    }

    input:active,
    textarea:active {
        @apply outline-none ring-0 !border-gray-500;
        box-shadow: none !important;
    }
}

@layer utilities {
    .input-error {
        @apply border-dekodiRed800 focus:border-dekodiRed800 active:border-dekodiRed800 focus:ring-0;
    }
}

@layer components {
    .panel {
        @apply border border-dekodiGray500 rounded px-4 py-4 bg-white;
    }

    .panel-py-0 {
        @apply py-0;
    }

    .clickable {
        @apply hover:opacity-70 cursor-pointer;
    }

    .heading {
        @apply text-xl text-dekodiGray1000 leading-6 font-medium;
    }

    .subheading {
        @apply text-dekodiGray1000 font-semibold text-sm;
    }

    .input {
        @apply border placeholder:text-dekodiGray500 cursor-pointer text-dekodiGray1000 px-4 py-2 rounded text-sm;
    }

    .btn-primary {
        @apply bg-dekodiRed800 hover:bg-dekodiRed1000 font-medium text-white px-6 py-2 rounded text-sm disabled:opacity-30 disabled:cursor-none;
    }

    .btn-primary-icon {
        @apply btn-primary flex flex-row items-center gap-2;
    }

    .btn-secondary {
        @apply bg-dekodiGray400 hover:bg-dekodiGray600 text-dekodiGray1000 cursor-pointer font-medium px-6 py-2 rounded text-sm disabled:opacity-30 disabled:cursor-none;
    }

    .btn-secondary-icon {
        @apply btn-secondary flex flex-row items-center;
    }
}

input[type="date"] {
    color: #4c5f68;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: #4c5f68;
}

input[type="date"]:disabled,
input[type="date"][disabled] {
    color: #95a6b1;
    opacity: 1;
}