@layer components {
    .btn-primary-base {
        @apply bg-custom-orange-400 text-base-white font-semibold text-[16px] leading-6 flex items-center gap-[8px] py-[12px] px-[18px] rounded-[8px] hover:bg-custom-orange-500 hover:text-white;
    }

    .btn-primary-sm {
        @apply bg-custom-orange-400 text-base-white font-semibold text-[14px] leading-5 flex items-center gap-[8px] py-[8px] px-[18px] rounded-[8px] hover:bg-custom-orange-500 hover:text-base-white;
    }

    .btn-primary-base:disabled, .btn-primary-sm:disabled {
        @apply bg-custom-orange-300  hover:bg-custom-orange-400 hover:text-white;
    }

    .btn-secondary-base {
        @apply bg-custom-orange-50 text-custom-orange-700 hover:text-custom-orange-700 font-semibold text-[16px] leading-6 flex items-center gap-[8px] py-[12px] px-[18px] rounded-[8px] hover:bg-custom-orange-100 focus:bg-custom-orange-100;
    }

    .btn-secondary-sm {
        @apply bg-custom-orange-50 text-custom-orange-700 font-semibold text-[14px] leading-5 flex items-center gap-[8px] py-[8px] px-[18px] rounded-[8px] hover:bg-custom-orange-100;
    }

    .btn-secondary-base:disabled, .btn-secondary-sm:disabled {
        @apply bg-custom-orange-25  hover:bg-custom-orange-500 hover:text-white;
    }


    .btn-tertiary-base {
        @apply bg-custom-grey-50 text-custom-grey-600 font-semibold text-[16px] leading-6 flex items-center gap-[8px] py-[12px] px-[18px] rounded-[8px] hover:bg-custom-grey-100 hover:text-custom-grey-700;
    }

    .btn-tertiary-sm {
        @apply bg-custom-grey-50 text-custom-grey-600 font-semibold text-[14px] leading-5 flex items-center gap-[8px] py-[8px] px-[18px] rounded-[8px] hover:bg-custom-grey-100 hover:text-custom-grey-700;
    }

    .btn-secondary-base:disabled, .btn-secondary-sm:disabled {
        @apply bg-custom-grey-25  hover:bg-custom-grey-400 hover:text-white;
    }


    .btn-text-base {
        @apply bg-transparent text-custom-orange-500 font-semibold text-[16px] leading-6 flex items-center gap-[8px] py-[12px] px-[18px] rounded-[8px] hover:text-custom-orange-600;
    }

    .btn-text-sm {
        @apply bg-transparent text-custom-orange-500 font-semibold text-[14px] leading-5 flex items-center gap-[8px] py-[8px] px-[18px] rounded-[8px] hover:text-custom-orange-600;
    }

    .btn-danger-base {
        @apply bg-custom-red-600 hover:bg-custom-red-700 text-base-white font-semibold text-[16px] leading-6 flex items-center gap-[8px] py-[12px] px-[18px] rounded-[8px] hover:text-base-white;
    }

    .btn-danger-sm {
        @apply  bg-custom-red-600 hover:bg-custom-red-700 text-white font-bold text-[14px] leading-5 flex items-center gap-[8px] py-[8px] px-[18px] rounded-[8px] hover:text-base-white;
    }

    .btn-primary {
        @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
    }

    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
    }

    .btn-info {
        @apply bg-custom-grey-500 hover:bg-custom-grey-700 text-white hover:text-white font-bold py-2 px-4 rounded;
    }

    .btn-success {
        @apply bg-custom-green-500 hover:bg-custom-green-700 text-white font-bold py-2 px-4 rounded;
    }

    .bg-success-secondary {
        @apply bg-custom-green-50 hover:bg-custom-green-100 focus:bg-custom-green-100 text-custom-green-700;
    }

    .btn-filter-tag {
        @apply flex justify-between items-center gap-1.5 bg-base-white rounded-[48px] text-custom-blue-700 px-3 py-1;
    }

    .btn-light-danger {
        @apply rounded-2xl bg-custom-red-100 text-custom-red-500 px-1.5 py-0.5;
    }

    .btn-light-success {
        @apply rounded-2xl bg-custom-green-100 text-custom-green-500 px-1.5 py-0.5;
    }

    .btn-square-success {
        @apply bg-custom-green-100 text-custom-green-500 px-2 py-1 font-bold text-[12px] rounded leading-4;
    }

    .btn-square-danger {
        @apply bg-custom-red-100 text-custom-red-500 px-2 py-1 font-bold text-[12px] rounded leading-4;
    }

    .home .card .custom-control-label {
        position: sticky;
        margin-bottom: 0;
        vertical-align: top;
    }

    .home .custom-switch.custom-switch-sm .custom-control-label {
        padding-left: 0;
        padding-bottom: 0;
    }

    .search-input {
        @apply h-10 pl-3 py-2 border border-solid border-custom-grey-300 rounded-lg;
    }
    .form-input {
        @apply min-h-10 pl-3 py-2 border border-solid border-custom-grey-300 focus:border-custom-grey-300 rounded-lg;
    }

    .search-input::placeholder {
        @apply text-custom-grey-500;
    }

    .search-inpurt {
        @apply bg-white border-custom-grey-300 outline-custom-grey-300 px-3 py-0.5 rounded-lg text-base;
    }

    .search-inpurt.form-control:focus,
    .search-inpurt.asColorPicker-input:focus,
    .dataTables_wrapper select.search-inpurt:focus,
    .search-inpurt.typeahead:focus,
    .search-inpurt.tt-query:focus,
    .search-inpurt.tt-hint:focus,
    .dataTables_wrapper #filter-form select.select2-selection.select2-selection--multiple:focus,
    {
        @apply bg-white border-custom-grey-300;
    }

    .input-group-append .input-group-text, .input-group-prepend .input-group-text{
        @apply border-custom-grey-300 px-3 py-3.5 text-custom-grey-600 bg-white;
    }
    .input-group-prepend .input-group-text.fa-calendar{
        @apply rounded-l-lg ;
    }
    .input-group-prepend .input-group-text.date-text{
        @apply rounded-r-lg ;
    }

    #modal-email #fileuploader span {
        @apply hidden;
    }

    .tox-tinymce { @apply !border !border-custom-grey-300;}

    .bg-success-upload { @apply !bg-custom-green-300; }


    .permission-box:has(input:checked) {
        @apply border-custom-orange-600 ring-4 ring-custom-orange-50;
    }
    .br-theme-bars-square .br-widget a {
        @apply border-custom-grey-500 text-custom-grey-500 hover:border-custom-orange-500 hover:text-custom-orange-500;
    }

    .br-theme-bars-square .br-widget a.br-selected, .br-theme-bars-square .br-widget a.br-active,
    .br-theme-fontawesome-stars .br-widget a.br-selected:after,
    .br-theme-fontawesome-stars .br-widget a.br-active:after,
    .br-theme-css-stars .br-widget a.br-selected:after,
    .br-theme-css-stars .br-widget a.br-active:after {
        @apply border-custom-orange-500 text-custom-orange-500;
    }
    .swal2-container{
        @apply !z-[11111];
    }
}