axonyx-ui 0.0.48

.ax-field {
    display: grid;
    gap: 0.45rem;
}

.ax-field__label,
.ax-field-label {
    color: var(--ax-text);
    font-family: var(--ax-font-sans);
    font-size: 0.88rem;
    font-weight: 700;
}

.ax-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ax-field__hint,
.ax-field__error {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.ax-field__hint {
    color: var(--ax-text-muted);
}

.ax-field__error {
    color: var(--ax-danger);
}

.ax-control {
    position: relative;
    display: flex;
    align-items: center;
}

.ax-control__icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ax-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ax-control__icon[data-slot='start'] {
    left: 0.85rem;
}

.ax-control__icon[data-slot='end'] {
    right: 0.85rem;
}

.ax-input,
.ax-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ax-surface) 82%, black),
            color-mix(in srgb, var(--ax-surface-2) 54%, black)
        );
    color: var(--ax-text);
    font-family: var(--ax-font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0.7rem 0.85rem;
    box-shadow:
        inset 0 1px 7px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.015);
}

.ax-input[data-size='sm'],
.ax-textarea[data-size='sm'] {
    min-height: 2rem;
    padding: 0.5rem 0.72rem;
    font-size: 0.82rem;
}

.ax-input[data-size='lg'],
.ax-textarea[data-size='lg'] {
    min-height: 3rem;
    padding: 0.82rem 1rem;
    font-size: 1rem;
}

.ax-control .ax-input {
    padding-left: 2.5rem;
}

.ax-control .ax-input + .ax-control__icon[data-slot='end'],
.ax-control .ax-input ~ .ax-control__icon[data-slot='end'] {
    right: 0.85rem;
}

.ax-control .ax-input[data-size='sm'] {
    padding-left: 2.2rem;
}

.ax-control .ax-input[data-size='lg'] {
    padding-left: 2.8rem;
}

.ax-control .ax-input[data-size='sm'] ~ .ax-control__icon[data-slot='start'] {
    left: 0.72rem;
}

.ax-control .ax-input[data-size='lg'] ~ .ax-control__icon[data-slot='start'] {
    left: 1rem;
}

.ax-control .ax-input:has(+ .ax-control__icon[data-slot='end']) {
    padding-right: 2.5rem;
}

.ax-textarea {
    min-height: 7rem;
    resize: vertical;
}

.ax-input::placeholder,
.ax-textarea::placeholder {
    color: var(--ax-text-muted);
    opacity: 0.75;
}

.ax-input:hover,
.ax-textarea:hover {
    border-color: var(--ax-border-strong);
}

.ax-input:focus,
.ax-textarea:focus {
    outline: none;
    border-color: var(--ax-cyan);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-cyan) 42%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-field[data-state='error'] .ax-input,
.ax-field[data-state='error'] .ax-textarea,
.ax-input[aria-invalid='true'],
.ax-textarea[aria-invalid='true'] {
    border-color: var(--ax-danger);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-danger) 26%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-input:disabled,
.ax-textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ax-field[data-state='success'] .ax-input,
.ax-field[data-state='success'] .ax-textarea {
    border-color: color-mix(in srgb, var(--ax-primary) 60%, var(--ax-border));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-primary) 18%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-field[data-state='warning'] .ax-input,
.ax-field[data-state='warning'] .ax-textarea {
    border-color: color-mix(in srgb, #d7a54b 64%, var(--ax-border));
    box-shadow:
        0 0 0 2px color-mix(in srgb, #d7a54b 18%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-field[data-state='success'] .ax-field__hint {
    color: color-mix(in srgb, var(--ax-primary) 72%, var(--ax-text));
}

.ax-field[data-state='warning'] .ax-field__hint {
    color: color-mix(in srgb, #d7a54b 78%, var(--ax-text));
}