@layer components {
    .form-input {
        @apply w-full border border-[#D5D7DA] focus:border-primary-400 outline-none flex justify-end items-center self-stretch rounded-lg bg-white px-3.5 py-2.5;
        /* Shadows/shadow-xs */
        box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
    }

    .form-textarea {
        @apply w-full border border-[#D5D7DA] focus:border-primary-400 outline-none flex justify-end items-center self-stretch rounded-lg bg-white px-3.5 py-2.5;
        /* Shadows/shadow-xs */
        box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
    }

    .form-label {
        @apply text-gray-700;
    }

    .form-checkbox-group {
        @apply flex gap-2;
    }

    .form-checkbox {

        width: 16px;
        height: 16px;
        border-radius: var(--spacing-xs, 4px);
        border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
    }


    .form-select {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        align-self: stretch;
        border-radius: var(--radius-lg);
        border: 1px solid #D5D7DA;
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 3.5);
        padding-block: calc(var(--spacing) * 2.5);
        font: inherit;
        color: inherit;
        outline: none;
        appearance: none;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        /* default arrow (LTR) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(var(--spacing) * 2) center;
        background-size: 12px;
    }

    /* RTL fix: force arrow to stay on the "end" side */
    [dir="rtl"] .form-select {
        background-position: left calc(var(--spacing) * 2) center;
    }

    .form-select:focus {
        border-color: var(--color-primary, #007bff);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    }

    .form-select:focus {
        border-color: var(--color-primary, #007bff);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    }

}