/** FORMS **/
fieldset {
    padding: 0.5rem 2rem;
    border: 1px solid var(--surface-surface-primary);
}

button, select{
    border-radius: 8px;
}

legend {
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1rem;
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
select,
textarea,
textarea[type="text"] {
    font-family: inherit;
    padding: 8px;
    border-radius: var(--mit-border-raduis);
    border: 1px solid var(--mit-gray-300);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    font-size: 1em;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: block;
    background-color: var(--surface-surface-bg);
    width: 100%;
}

input[type="checkbox"],
[type="radio"]{
    width: 2rem;
    height: 1.6rem;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 14px;
    color: var(--text-text-primary);
    border: 1px solid var(--surface-surface-tertiary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    position: relative;
    background: var(--surface-surface-bg) no-repeat 100%;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
}

select option {
    padding: 10px;
    color: var(--text-text-primary);
}

input{
    border: 1px solid var(--surface-surface-tertiary);
}

input:disabled,
input:disabled:hover,
button:disabled,
button:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]):focus,
select:focus,
textarea:focus,
textarea[type="text"]:focus {
    outline: none;
    border-radius: calc(var(--mit-table-border-raduis) / 2);
    border: 1px solid var(--surface-brand-surface-brand-primary);
    background: var(--mit-white);
    box-shadow: 0 0 0 4px var(--mit-primary-50);
}

input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(10%) sepia(100%) saturate(7270%) hue-rotate(341deg) brightness(89%) contrast(99%);
}

button, .btn, .button{
    background-color: var(--surface-brand-surface-brand-primary);
    color: var(--text-text-tertiary);
    padding: 10px 16px;
    font-weight: 600;
    min-width: max-content;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    transform: scale(1);
    transition: transform 0.2s ease;
    border: 1px solid transparent;
    line-height: 20px;
}

button:hover {
    opacity: 0.8;
}

button:hover, .btn:hover {
    background-color: var(--surface-brand-surface-brand-quaternary);
}

button:active, .btn:active {
    transform: scale(0.95);
    background-color: var(--surface-brand-surface-brand-click);
}