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

@layer base {
    input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
    select,
    textarea {
        border-color: #94a3b8;
        background-color: #ffffff;
        color: #0f172a;
    }

    input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button'])::placeholder,
    textarea::placeholder {
        color: #64748b;
        opacity: 1;
    }

    input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):focus,
    select:focus,
    textarea:focus {
        border-color: #7c3aed;
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
    }
}

@layer components {
    .input,
    .select,
    .textarea {
        border: 1px solid #94a3b8;
        background: #ffffff;
        color: #0f172a;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.035);
    }

    .input:hover,
    .select:hover,
    .textarea:hover {
        border-color: #64748b;
    }

    .input:focus,
    .select:focus,
    .textarea:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
        outline: none;
    }

    .input:disabled,
    .select:disabled,
    .textarea:disabled {
        border-color: #cbd5e1;
        background: #f1f5f9;
        color: #64748b;
    }
}