.input,
.textarea,
.select {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-text);
    padding: 0.95rem 1rem;
    outline: none;
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(36, 46, 43, 0.82) 50%),
        linear-gradient(135deg, rgba(36, 46, 43, 0.82) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.8rem;
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.color-field {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.color-field__picker {
    width: 64px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
}

.color-field__picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-field__picker::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}

.color-field__picker::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}