input[type="text"],
input[type="number"],
input[type="date"] {
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--text-color);
    background: var(--control-background);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    margin: 5px auto;
    padding: 10px;
    text-align: center;
    width: 100%;
}

input:disabled,
input[readonly] {
    background: var(--control-background-disabled);
}

textarea[readonly] {
    background: var(--control-background-disabled);
}

textarea {
    font-size: var(--font-size);
    color: var(--text-color);
    background: var(--control-background);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    padding: 10px;
    display: inline-block;
    width: 100%;
}

textarea[id$="output"] {
    background: var(--control-background-disabled);
}

select {
    appearance: none;
    display: block;
    color: var(--text-color);
    background-color: var(--control-background);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-color) 50%), linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size);
    margin: 10px auto;
    padding: 10px 44px 10px 10px;
    width: 100%;
}

select:hover {
    border-color: var(--primary-color);
}

select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

button {
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: #000;
    border-radius: var(--radius);
    border: none;
    padding: 10px;
    margin: 5px auto;
    cursor: pointer;
    background: var(--primary-color);
    display: block;
    width: 100%;
}

button:hover,
button:active {
    background: var(--primary-color-darken);
}