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



@layer components {
  /*.btn-primary {*/
  /*  @apply py-2 px-4 bg-blue-200;*/
  /*}*/
    .btn-round-primary {
        @apply rounded-full p-3 border border-primary inline-block text-primary shadow-md hover:bg-primary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none
    }

    .btn-round-secondary {
        @apply rounded-full p-3 border border-secondary inline-block text-secondary shadow-md hover:bg-secondary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none
    }

    .btn-round-danger {
        @apply rounded-full p-3 border border-danger inline-block text-danger shadow-md hover:bg-danger hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none
    }

    .btn-primary {
        @apply rounded-full py-2 px-5 border border-primary inline-block text-primary shadow-md hover:bg-primary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none text-center
    }

    .btn-secondary {
        @apply rounded-full py-2 px-5 border border-secondary inline-block text-secondary shadow-md hover:bg-secondary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none text-center
    }

    .btn-danger {
        @apply rounded-full py-2 px-5 border border-danger inline-block text-danger shadow-md hover:bg-danger hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none text-center
    }

    .btn-primary-icon {
        @apply rounded-full py-2 px-5 border border-primary inline-block text-primary shadow-md hover:bg-primary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none flex space-x-2 items-center
    }

    .btn-secondary-icon {
        @apply rounded-full py-2 px-5 border border-secondary inline-block text-secondary shadow-md hover:bg-secondary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none flex space-x-2 items-center
    }

    .btn-danger-icon {
        @apply rounded-full py-2 px-5 border border-danger inline-block text-danger shadow-md hover:bg-danger hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none flex space-x-2 items-center
    }

    .btn-secondary-group {
        @apply   py-2 px-5 -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-full sm:first:rounded-se-none sm:last:rounded-e-full sm:last:rounded-es-none  border border-secondary text-body text-center hover:bg-secondary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none
    }

    .btn-secondary-group-option {
        @apply   py-2 px-5 -mt-px -ms-px first:rounded-s-full last:rounded-e-full border border-secondary text-body text-center hover:bg-secondary hover:text-white transition duration-300 ease-in-out disabled:opacity-50 disabled:pointer-events-none
    }

    .form-label {
        @apply block font-light text-sm capitalize mb-2 text-body
    }

    .form-input {
        @apply py-2 px-4 block w-full bg-card border-divider rounded-lg focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none font-medium text-body mb-4
    }

    .form-select {
        @apply py-2 capitalize px-4 pe-9 block w-full bg-card border border-divider rounded-md focus:ring-1 focus:ring-inset focus:ring-indigo-600 disabled:opacity-50 font-medium text-body mb-4
    }

    .form-date {
        @apply py-2 capitalize bg-card px-4 pe-9 block w-full border border-divider rounded-md focus:ring-1 focus:ring-inset focus:ring-indigo-600 disabled:opacity-50 font-medium text-body mb-4
    }

    .form-input-icon-before {
        @apply px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-divider bg-divider text-body mb-4
    }

    .form-input-icon-after {
        @apply px-4 inline-flex items-center min-w-fit rounded-e-md border border-s-0 border-divider bg-divider text-body mb-4
    }

    .form-switch-label {
        @apply ms-4 font-light text-sm capitalize text-body
    }

    .menu-item {
        @apply text-menu flex space-x-3 items-center py-2 px-4 rounded-lg border-l-4 border-transparent hover:border-primary hover:bg-primary/20 transition duration-300 w-[230px]
    }

    .dialog-backdrop::backdrop {
        @apply bg-gray-900 bg-opacity-50;
    }
}

.default {
    --g2g-primary: 255, 104, 39;
    --g2g-secondary: 107, 114, 128;
    --g2g-danger: 220, 38, 38;
    --g2g-info: 37, 99, 235;
    --g2g-warning: 234, 179, 8;
    --g2g-success: 34, 197, 94;
    --g2g-body: 107, 114, 128;
    --g2g-heading: 75, 85, 99;
    --g2g-title: 75, 85, 99;
    --g2g-menu: 107, 114, 128;
    --g2g-background: 249, 249, 249;
    --g2g-card: 255, 255, 255;
    --g2g-divider: 224, 224, 224;
}

.teal {
    --g2g-primary: 0, 167, 157;
    --g2g-secondary: 107, 114, 128;
    --g2g-danger: 220, 38, 38;
    --g2g-info: 37, 99, 235;
    --g2g-warning: 234, 179, 8;
    --g2g-success: 34, 197, 94;
    --g2g-body: 107, 114, 128;
    --g2g-heading: 55, 65, 81;
    --g2g-title: 75, 85, 99;
    --g2g-menu: 107, 114, 128;
    --g2g-background:249, 249, 249;
    --g2g-card: 255, 255, 255;
    --g2g-divider: 224, 224, 224;
}

.dark {
    --g2g-primary: 255, 104, 39;
    --g2g-secondary: 107, 114, 128;
    --g2g-danger: 220, 38, 38;
    --g2g-info: 37, 99, 235;
    --g2g-warning: 234, 179, 8;
    --g2g-success: 34, 197, 94;
    --g2g-body: 176, 176, 176;
    --g2g-heading: 224, 224, 224;
    --g2g-title: 224, 224, 224;
    --g2g-menu: 224, 224, 224;
    --g2g-background: 18, 18, 18;
    --g2g-card: 36, 36, 36;
    --g2g-divider: 56, 56, 56;
}

.g2g {
    --g2g-primary: 255, 104, 39;
    --g2g-secondary: 0, 167, 128;
    --g2g-danger: 220, 78, 95;
    --g2g-info: 37, 99, 235;
    --g2g-warning: 234, 179, 8;
    --g2g-success: 34, 197, 94;
    --g2g-body: 210, 215, 220;
    --g2g-heading: 240, 245, 250;
    --g2g-title: 255, 255, 255;
    --g2g-menu: 255, 255, 255;
    --g2g-background: 55, 65, 81;
    --g2g-card: 75, 85, 99;
    --g2g-divider: 90, 100, 115;
}

.colour_blind {
    --g2g-primary: 0, 114, 206;
    --g2g-secondary: 252, 163, 17;
    --g2g-danger: 209, 73, 91;
    --g2g-info: 37, 99, 235;
    --g2g-warning: 234, 179, 8;
    --g2g-success: 108, 169, 102;
    --g2g-body: 82, 82, 82;
    --g2g-heading: 27, 27, 27;
    --g2g-title: 27, 27, 27;
    --g2g-menu: 82, 82, 82;
    --g2g-background: 253, 253, 253;
    --g2g-card: 255, 255, 255;
    --g2g-divider: 214, 214, 214;
}