@layer components {
    .bw-textarea,
    .bw-input {
        @apply
        !outline-none
        !ring-0
        border-2
        w-full text-slate-600 dark:text-dark-300 border-slate-300/50 hover:border-slate-300 dark:border-dark-600 dark:hover:border-dark-500/50 dark:bg-transparent
        focus:outline-none
        focus:border-2
        focus:border-primary-500 dark:focus:border-dark-500 dark:placeholder-dark-400/60 transition-all
        rounded-md
        text-sm
        px-3.5 py-[8.5px]
    }

    .bw-input[disabled], .bw-input[readonly], fieldset[disabled] .bw-input {
        @apply !bg-gray-100/60 dark:!bg-white/10 dark:!opacity-40 !text-slate-400/70 dark:!text-dark-400 cursor-not-allowed dark:!border-dark-500/70
    }

    .bw-input.small {
        @apply py-2
    }

    .bw-input.medium {
        @apply py-[12px]
    }

    .bw-input.big {
        @apply py-5
    }

    input.no-label, .bw-input.no-label, .bw-textarea.bw-input.no-label {
        @apply placeholder-transparent
    }

    .form-label {
        @apply
        absolute
        cursor-text
        left-3.5
        rtl:!right-3.5
        rtl:left-[unset]
        !inline-block
        -top-2
        text-xs
        px-1
        transition-all
        peer-placeholder-shown:top-[11.8px]
        peer-focus:-top-2 bg-white text-primary-900/40 dark:text-dark-400/60 z-20 dark:bg-dark-700 dark:px-2 dark:rounded-md dark:py-0.5
        /*dark-800*/
    }

    .form-label.small {
        @apply
        peer-placeholder-shown:!top-[11px] peer-focus:!-top-2
    }

    .form-label.medium {
        @apply
        peer-placeholder-shown:!top-[15px] peer-focus:!-top-2
    }

    .form-label.big {
        @apply
        peer-placeholder-shown:!top-[23px] peer-focus:!-top-2
    }

    .bw-select div.clickable.disabled, .bw-select div.clickable.readonly, fieldset[disabled] .bw-select {
        @apply !bg-gray-100/60 opacity-95 dark:opacity-70 dark:!bg-white/5 select-none cursor-not-allowed
    }

    .bw-select div.clickable.enabled {
        @apply focus:border-blue-400 dark:focus:border-dark-500 cursor-pointer
    }

    .prefix svg, .suffix svg {
        @apply ltr:!mr-1 rtl:!ml-1 w-6 h-6 dark:text-dark-500
    }

    .ql-toolbar.ql-snow {
        @apply !rounded-t-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
    }

    .ql-toolbar.ql-snow .ql-stroke, .ql-stroke.ql-thin {
        @apply dark:!text-dark-500 dark:!stroke-dark-500
    }

    .ql-snow.ql-toolbar button:hover .ql-stroke {
        @apply !stroke-primary-500
    }

    .ql-container.ql-snow {
        @apply !rounded-b-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
    }

    .ql-editor.ql-blank::before {
        @apply !text-slate-300 dark:!text-dark-400/60 !not-italic
    }

}