/* Input Styles */
.input {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem;
    padding: 8px 12px;
    border: 1px dashed var(--color-border);
    background: none;
    background: var(--color-overlay);
    box-shadow: inset 0 0 0 1px var(--light, var(--color-text)) var(--dark, var(--color-surface));
    color: var(--color-text);
    cursor: pointer;
    gap: 0.25rem;
    transition: background-color 100ms ease-out;
}

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

.input:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
}

.input:hover:not(:disabled),
.input:focus-visible {
    background: var(--color-overlay);
    color: var(--color-text);
    outline: none;
    border: 1px dashed var(--color-border);
}