@layer components {
    .form-control {
            appearance: none;
            background: #ffffff;
            border: 1px solid var(--dashboard-color-border-strong);
            border-radius: 0.5rem;
            box-shadow: none;
            color: var(--dashboard-color-text);
            display: block;
            font-size: 1rem;
            line-height: 1.5rem;
            min-height: 2.75rem;
            padding: 0.625rem 0.75rem;
            width: 100%;
        }

    .form-control:focus {
            border-color: var(--dashboard-color-brand);
            box-shadow: 0 0 0 3px rgb(var(--dashboard-color-brand-rgb) / 0.16);
            outline: 0;
        }

    .form-control[readonly],
        .form-control[disabled] {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text-muted);
            cursor: not-allowed;
        }

    .form-control--error {
            border-color: var(--dashboard-color-negative);
            color: #991b1b;
        }

    select.form-control {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-position: right 0.75rem center;
            background-repeat: no-repeat;
            background-size: 1rem;
            cursor: pointer;
            padding-right: 2.5rem;
        }
}