button,
input,
textarea,
.select-wrapper {
    background-color: #474749;
    border: initial;
    border-radius: 2px;
    color: white;
    overflow: hidden;
}
button:not(:disabled):hover,
.select-wrapper:not(:disabled):hover {
    background-color: #505054;
}
button:not(:disabled):hover:active,
.select-wrapper:not(:disabled):hover:active {
    background-color: #5c5c5e;
}

:-moz-any(button, input, textarea, select):focus {
    box-shadow: 0 0 0 1px #0a84ff inset,
                0 0 0 1px #0a84ff,
                0 0 0 4px rgba(10, 132, 255, 0.3);
}

:-moz-any(button, input, textarea, select)::-moz-focus-inner {
    all: initial;
}

button:disabled,
input:disabled {
    opacity: 0.35;
}

button,
input,
textarea,
select {
    padding: 4px 8px;
}

/* No inset for spinbox control */
input[type="number"] {
    padding-inline-end: initial;
}

button,
select {
    /* Override mac.css height */
    height: initial !important;
}

button:default {
    background-color: var(--blue-60);
    color: white !important;
}
button:default:hover {
    background-color: var(--blue-70);
}
button:default:hover:active {
    background-color: var(--blue-80);
}

.select-wrapper {
    --arrow-width: 20px;
    position: relative;
    display: inline-block;
}
.select-wrapper::after {
    align-items: center;
    content: "▼";
    display: flex;
    height: 100%;
    margin-right: 4px;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--arrow-width);
}
select {
    -moz-appearance: none;
    background: inherit;
    border: initial;
    color: inherit;
    padding-right: calc(8px + var(--arrow-width));
}
option {
    color: white !important;
}
option:disabled {
    color: rgba(255, 255, 255, 0.25) !important;
}
