@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

.field {
    display: flex;
    flex-direction: column;
}

.field__label {
    font-size: $font-sm;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: $space-1;
}

.field__hint {
    display: block;
    margin-top: $space-1;
    font-size: $font-xs;
    color: var(--color-text-muted);
}

.field__error {
    margin-top: $space-1;
    font-size: $font-sm;
    color: var(--color-danger);
}

.field__input,
.field__select {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-radius: $radius-md;
    padding: $space-2 $space-3;
    font-size: $font-sm;
    transition: border-color $transition-fast;

    @include dark {
        border-color: var(--color-border);
        background: var(--color-surface-muted);
    }

    &::placeholder {
        color: var(--color-text-muted);
    }

    &:focus {
        outline: none;
        border-color: var(--color-accent-strong);
        box-shadow: 0 0 0 3px rgb(99 102 241 / 15%);
    }
}

.field--sm {
    .field__label {
        font-size: $font-xs;
        color: var(--color-text-secondary);
    }

    .field__input,
    .field__select {
        padding: $space-1 * 1.5 $space-2;
    }
}

.field__checkbox-row {
    display: flex;
    align-items: center;
    gap: $space-2;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

.field__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: $radius-sm;
    accent-color: var(--color-accent);
}