input {
    background-color: var(--background-2);
    border-color: var(--background-1);
    border-style: solid;

    color: var(--text-1);

    appearance: textfield;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    display: inline-block;
    width: 16px;
    height: 16px;
    aspect-ratio: 1;
    transform: translate(0%, 50%);

    background-color: var(--background-2);

    border-color: var(--background-1);
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;

    cursor: pointer;
    transition:
        background-color 300ms ease-out,
        border-color 250ms ease-in;
}

input[type="checkbox"]:hover {
    background-color: var(--background-1);
    border-color: var(--background-2);
}

input[type="checkbox"]:checked {
    background-color: var(--text-1);
    border-color: var(--text-3);
}

input[type="checkbox"]:checked:hover {
    background-color: var(--text-2);
    border-color: var(--text-1);
}

textarea {
    background-color: var(--background-2);
    border-color: var(--background-1);
    border-style: solid;

    color: var(--text-1);
}

select {
    background-color: var(--background-2);
    border-color: var(--background-1);
    border-style: solid;

    color: var(--text-1);
}

dropdown-menu {
    display: inline-block;
    background-color: var(--background-2);
    color: var(--text-1);

    border-style: solid;
    border-radius: 2px;
    border-width: 2px;
    border-color: var(--background-3);

    transition:
        all 100ms,
        visibility 1ms;

    font-size: large;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

dropdown-menu:hover {
    color: var(--text-2);
    background-color: var(--background-3);
}

dropdown-menu:active {
    color: var(--text-1);
    background-color: var(--background-4);
    border-color: var(--background-4);
}

.dropdown-menu-fill-down {
    height: 100%;
}

/* links */
a {
    transition: color 250ms;
}

a:link {
    color: var(--link-1);
}
a:visited {
    color: var(--link-3);
}
a:hover {
    color: var(--link-2);
}
a:active {
    color: var(--link-2);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background-color: var(--background-4);
    border-color: var(--background-2);
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    height: 16px;
    overflow: hidden;
}

input[type="range"]:hover {
    background-color: var(--background-3);
    border-color: var(--background-1);
}

input[type="range"]::-webkit-slider-thumb {
    background-color: var(--background-3);
    border-color: var(--background-4);
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    box-shadow: -80px 0 0 70px var(--text-1);
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--background-3);
    border-color: var(--background-4);
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    height: 16px;
    width: 16px;
}

input[type="range"]::-moz-range-progress {
    background-color: var(--text-1);
    height: 16px;
}
input[type="range"]::-moz-range-track {
    background-color: var(--background-4);
    height: 16px;
}

button {
    background-color: var(--background-2);
    color: var(--text-1);

    border-style: solid;
    border-radius: 2px;
    border-width: 2px;
    border-color: var(--background-3);

    transition:
        all 100ms,
        visibility 1ms;

    font-size: large;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    cursor: pointer;
}

button:hover {
    color: var(--text-2);
    background-color: var(--background-3);
}

button:active {
    color: var(--text-1);
    background-color: var(--background-4);
    border-color: var(--background-4);
}

button:disabled {
    color: var(--text-1);
    background-color: var(--background-4);
    border-color: var(--background-4);
}

.blocklyFlyoutButton {
    fill: transparent;
    stroke: var(--text-1);
    stroke-width: 1px;
    transition: fill 250ms;
}

.blocklyFlyoutButton:hover {
    fill: var(--text-3);
    stroke: var(--text-1);
    stroke-width: 1px;
}

.blocklyFlyoutButtonShadow {
    fill: transparent;
}

.blocklyFlyoutButton>.blocklyText {
    fill: var(--text-1);
    font: 500 16pt helvetica;
    stroke: transparent;
}

.blocklyFlyoutButton > .blocklyText {
    fill: var(--text-1);
    stroke: none;
}