@tailwind base;
@tailwind components;
@tailwind utilities;

/* https://htmlcolors.com/hex-to-hsl -> convert hex to hsl */
@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 25 21% 22%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 47.4% 11.2%;
        --border: 25 5% 45%;
        --input: 214.3 31.8% 91.4%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 47.4% 11.2%;
        --primary: 338 80% 32%;
        --primary-foreground: 0 0% 100%;
        --primary-dark: 335 100% 27%;
        --primary-darker: 336 74% 35%;
        --primary-lighter: 336 44% 48%;
        --secondary: 0 0% 11%;
        --secondary-foreground: 0 0% 100%;
        --secondary-dark: 0 0% 11%;
        --secondary-darker: 0 0% 11%;
        --accent: 47 40% 88%;
        --accent-foreground: 30 6% 25%;
        --accent-light: 45 44% 96%;
        --accent-lightest: 48 100% 98%;
        --accent-dark: 20 2% 72%;
        --accent-darker: 0 1% 54%;
        --safe: 165 70% 56%;
        --safe-foreground: 0 0% 100%;
        --destructive: 0 100% 50%;
        --destructive-foreground: 210 40% 98%;
        --ring: 335 100% 34%;
        --radius: 0.5rem;
    }

    .dark {}
}

@layer utilities {

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        @apply appearance-none;
    }
}

@layer components {
    body {
        @apply font-normal;
    }

    h1 {
        @apply text-5xl font-medium text-stone-900 dark:text-white;
    }

    h2 {
        @apply text-4xl font-medium text-stone-900 dark:text-white;
    }

    h3 {
        @apply text-3xl font-medium text-stone-900 dark:text-white;
    }

    h4 {
        @apply text-2xl font-medium text-stone-900 dark:text-white;
    }

    h5 {
        @apply text-xl font-normal text-stone-900 dark:text-white;
    }

    h6 {
        @apply text-lg font-normal text-stone-900 dark:text-white;
    }

    small {
        @apply text-sm font-medium leading-none;
    }

    blockquote {
        @apply mt-6 border-l-2 pl-6 italic;
    }

    input[type="checkbox"][readonly] {
        pointer-events: none;
    }

    /* classes */
    /* lucide */
    .lucide {
        @apply w-5 h-5;
    }

    .icon-xs {
        @apply w-4 h-4;
    }

    .icon-sm {
        @apply w-4 h-4;
    }

    .icon-md {
        @apply w-5 h-5;
    }

    .icon-lg {
        @apply w-6 h-6;
    }

    .icon-xl {
        @apply w-6 h-6;
    }

    /* button */
    .btn {
        @apply py-2.5 px-5 text-sm text-center rounded-lg gap-2 focus:z-10 cursor-pointer border;
        @apply group-aria-busy:bg-secondary/70 group-aria-busy:cursor-not-allowed group-aria-busy:inline-flex group-aria-busy:justify-center group-aria-busy:items-center;
    }

    .btn-disabled {
        @apply opacity-50 pointer-events-none inline-flex justify-center items-center;
    }

    .btn-primary {
        @apply text-primary-foreground bg-primary hover:bg-primary-darker hover:text-primary-foreground/90 border-primary;
    }

    .btn-secondary {
        @apply text-secondary-foreground bg-secondary hover:bg-secondary-darker hover:text-secondary-foreground/90 disabled:bg-secondary/50 border-secondary;
    }

    .btn-outlined {
        @apply text-foreground border border-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground;
        @apply group-aria-busy:text-secondary-foreground/90;
    }

    .btn-block {
        @apply w-full;
    }

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

    .btn-xs {
        @apply px-3 py-2 text-xs;
    }

    .btn-sm {
        @apply px-3 py-2 text-sm;
    }

    .btn-md {
        @apply px-5 py-2.5 text-sm;
    }

    .btn-lg {
        @apply px-5 py-3 text-base;
    }

    .btn-xl {
        @apply px-6 py-3.5 text-base;
    }

    /* link */
    .link {
        @apply text-blue-600 underline text-nowrap;
    }

    .link-icon {
        @apply inline-flex items-center gap-1;
    }

    .link-primary {
        @apply text-primary hover:text-primary-dark;
    }

    .link-secondary {
        @apply text-secondary hover:text-primary;
    }

    .link-sm {
        @apply text-sm;
    }

    .link-md {
        @apply text-sm;
    }

    .link-lg {
        @apply text-base;
    }

    /* card */
    .card {
        @apply border rounded-lg p-4;
    }

    /* chip */
    .badge {
        @apply font-medium rounded-md inline-block text-nowrap;
    }

    .badge-base {
        @apply border-none text-foreground !p-0;
    }

    .badge-accent {
        @apply bg-accent text-foreground;
    }

    .badge-outlined {
        @apply bg-background text-foreground border;
    }

    .badge-icon {
        @apply inline-flex items-center gap-1;
    }

    .badge-xs {
        @apply text-xs px-2.5 py-0.5;
    }

    .badge-sm {
        @apply text-xs px-2.5 py-1;
    }

    .badge-md {
        @apply text-sm px-1.5 py-1;
    }

    .badge-lg {
        @apply text-base px-3 py-0.5;
    }

    /* navbar */
    .navbar {
        @apply w-full flex justify-between items-center;
    }

    .nav-links {
        @apply flex items-center gap-2 h-full;
    }

    .nav-link {
        @apply text-foreground hover:text-primary;
    }

    .nav-link.active {
        @apply underline text-primary hover:text-primary;
    }

    /* form */
    /* label */
    .label {
        @apply block mb-2 text-sm text-foreground dark:text-white capitalize;
    }

    /* input */
    .input__wrapper {
        @apply relative;
    }

    .input {
        @apply text-sm block w-full p-2.5 text-foreground border border-border/50 rounded-lg bg-gray-50 focus:ring-1 focus:ring-primary focus:border-primary dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:text-white dark:focus:ring-primary dark:focus:border-primary;
        @apply disabled:cursor-not-allowed disabled:bg-gray-100;
    }

    .input-hint {
        @apply text-sm mt-1 text-muted-foreground dark:text-muted-foreground;
    }

    .input-icon {
        @apply !ps-10 bg-gray-100;
    }

    .input-leading__wrapper {
        @apply absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none;
    }

    .input-trailing__wrapper {
        @apply absolute inset-y-0 end-0 flex items-center pe-3;
    }

    .input-xs {
        @apply p-2 text-xs;
    }

    .input-sm {
        @apply p-2.5 text-sm;
    }

    .input-lg {
        @apply p-4 text-base;
    }

    .icon-2xl {
        @apply w-12 h-12;
    }

    /* checkbox */
    .checkbox-wrapper {
        @apply flex justify-start items-center;
    }

    .checkbox {
        @apply w-4 h-4 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary dark:focus:ring-primary dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
    }

    .checkbox__caption-active {
        @apply items-start;
    }

    .checkbox-caption {
        @apply text-xs font-normal text-gray-500 dark:text-gray-300;
    }

    .datepicker {
        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary dark:focus:border-primary;
    }

    .datepicker:focus {
        border: none !important;
    }

    .datepicker:hover {
        cursor: pointer;
    }

    /* application specific styles */
    .booking__section {
        @apply flex flex-col lg:flex-row-reverse gap-10;
    }

    .booking__section-contact_details {
        @apply w-full self-start order-2 lg:w-[50%] lg:order-1;
    }

    .booking__section-warehouse_details {
        @apply w-full p-6 border rounded-xl relative self-start order-1 lg:order-2 lg:w-[50%] lg:top-[78px] lg:sticky;
    }

    .service_checkbox {
        @apply relative min-h-[80px] mb-3 border p-4 rounded-xl flex justify-between items-center gap-10 w-full;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    /* Override the dropdown background color */
    /* Style the selected item */
    .ss-main {
        border-radius: 5px !important;
        font-size: 12px !important;
        white-space: nowrap;
        border-radius: var(--radius) !important;
        --tw-border-opacity: 1;
        border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
        padding: 0.625rem !important;
        border: solid 1px hsl(var(--border) / 0.5) !important;
        background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    }

    .ss-arrow {
        color: hsl(var(--text)) !important;
    }

    .ss-main:focus {
        border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
        box-shadow: none !important;
    }

    .ss-main .ss-values {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .ss-content {
        /* margin-top: 8px !important; */
        border-radius: var(--radius) !important;
    }

    .ss-content .ss-list .ss-option {
        /* border-radius: var(--radius) !important; */
        padding: 10px !important;
    }

    .ss-content .ss-list .ss-option:hover {
        background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
        color: hsl(var(--text)) !important;
    }

    .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
        /* primary */
        background-color: hsl(var(--primary)) !important;
        color: hsl(var(--primary-foreground)) !important;
    }

    .ss-option {
        font-size: 14px !important;
    }

    .ss-search {
        font-size: 12px !important;
    }

    select[data-id^="ss-"] {
        pointer-events: none;
        opacity: 0;
        display: flex !important;
        position: absolute;
        bottom: 0;
        height: 0px;
    }

    .country_code__field .field_with_errors {
        border: 1px solid red;
        border-radius: 6px;
        height: 100%;
    }

    .ss-placeholder {
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: rgba(156, 163, 175, var(--tw-placeholder-opacity, 1)) !important;
    }

    .ss-arrow {
        background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
        width: 30px !important;
        right: 0;
        position: absolute;
        height: 100% !important;
        padding: 0 10px;
        margin: 0 !important;
        top: 0;
    }

    .ss-deselect {
        background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
        width: 40px !important;
        right: 16px;
        position: absolute;
        height: 100% !important;
        margin: 0 !important;
        top: 0;
    }
}