/* ds-input.css — Shared input primitive for text inputs and connected input+addon groups.
 * Sizes: Default (40px), Large (51px), Small (34px = --ds-control-height-sm)
 * States: Default, Hover, Focus, Error, Disabled, Readonly
 */

/* --- Standalone Input --- */
.ds-input {
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    background-color: var(--ds-color-bg-card);
    border: 1px solid var(--ds-color-border-default);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-interactive);
    color: var(--ds-color-text-primary);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.ds-input::placeholder {
    color: var(--ds-color-text-placeholder);
}

/* --- Size Variants --- */
.ds-input--sm {
    padding: var(--ds-spacing-xs) var(--ds-spacing-sm);
    font-size: var(--ds-font-size-sm);
    line-height: var(--ds-line-height-sm);
}

.ds-input--lg {
    padding: var(--ds-spacing-md) var(--ds-spacing-lg);
}

.ds-input--block {
    width: 100%;
}

/* --- States --- */
.ds-input:hover:not(:disabled):not(:read-only):not(.ds-input--error),
select.ds-input:hover:not(:disabled):not(.ds-input--error) {
    border-color: var(--ds-color-border-hover-subtle);
}

.ds-input:focus:not(:disabled):not(:read-only),
select.ds-input:focus:not(:disabled) {
    border-color: var(--ds-color-border-focus);
    box-shadow: var(--ds-shadow-focus);
    z-index: 1;
}

.ds-input--error {
    border-color: var(--ds-color-text-danger);
}

.ds-input:disabled,
.ds-input:read-only:not(select) {
    color: var(--ds-color-text-disabled);
    background-color: var(--ds-color-bg-disabled);
}

.ds-input:disabled {
    cursor: not-allowed;
}

/* --- Select (native <select> styled as ds-input) --- */
select.ds-input {
    appearance: none;
    padding-right: 38px; /* spacing-md (12px) + chevron icon (18px) + spacing-xs (8px) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 256 256'%3E%3Cpath fill='%23448fda' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ds-spacing-md) center;
    cursor: pointer;
}

select.ds-input:disabled {
    cursor: not-allowed;
}

/* --- Textarea (native <textarea> styled as ds-input) --- */
textarea.ds-input {
    min-height: 80px;
    resize: vertical;
}

/* --- Input Wrapper (input + optional trailing icon) --- */
.ds-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ds-input-wrapper .ds-input {
    flex: 1;
    padding-right: 38px; /* spacing-md (12px) + trailing icon (18px) + spacing-xs (8px) */
}

.ds-input-wrapper__icon {
    position: absolute;
    right: var(--ds-spacing-md);
    display: flex;
    pointer-events: none;
    color: var(--ds-color-border-focus);
}

/* --- Input Group (connected input + addon) --- */
.ds-input-group {
    display: flex;
    flex-direction: row;
}

/* Addon after (default): input left-rounded, addon right-rounded */
.ds-input-group .ds-input {
    flex: 1;
    min-width: 0;
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
}

/* Addon before: addon left-rounded, input right-rounded */
.ds-input-group--before .ds-input {
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    border-right: 1px solid var(--ds-color-border-default);
    border-left: none;
}

/* --- Addon (text label or button connected to input) --- */
.ds-input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-sm);
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    background-color: var(--ds-color-bg-input-addon);
    border: 1px solid var(--ds-color-border-default);
    border-left: none;
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-interactive);
    color: var(--ds-color-text-primary);
    box-sizing: border-box;
    white-space: nowrap;
}

/* Addon size variants */
.ds-input-addon--sm {
    padding: var(--ds-spacing-xs) var(--ds-spacing-sm);
    font-size: var(--ds-font-size-sm);
    line-height: var(--ds-line-height-sm);
}

.ds-input-addon--lg {
    padding: var(--ds-spacing-md) var(--ds-spacing-lg);
    gap: var(--ds-spacing-md);
}

/* Unit-suffix addon: uniform width column so stacked values align */
.ds-input-addon--unit {
    min-width: var(--ds-field-addon-min-width);
    flex-shrink: 0;
}

/* Addon before position */
.ds-input-group--before .ds-input-addon {
    border-left: 1px solid var(--ds-color-border-default);
    border-right: none;
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
}

/* Button addon variant */
button.ds-input-addon {
    cursor: pointer;
    background-color: var(--ds-color-bg-card);
    color: var(--ds-color-primary);
}

button.ds-input-addon:hover {
    background-color: var(--ds-color-bg-button-hover);
    border-color: var(--ds-color-border-hover);
}

button.ds-input-addon:active {
    background-color: var(--ds-color-bg-button-active);
}