@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

:root {
    --fiction-control-not-focused-opacity: 0.6;
    --fiction-control-focused-opacity: 1;
    --fiction-button-color: cornflowerblue;
    --fiction-button-focus-color: blue;
    --fiction-button-disabled-color: dimgray;
    --fiction-button-disabled-background: transparent;
    --fiction-button-hover-color: #cae6ff;
    --fiction-button-min-width: 10ch;
    --fiction-icon-color: rgba(0, 0, 0, 0.54);
    --fiction-icon-color-inactive: rgba(0, 0, 0, 0.26);
    --fiction-combobox-border: blue;
    --fiction-combobox-disabled-border: black;
    --fiction-combobox-focus: blue;
    --fiction-combobox-arrow: var(--fiction-combobox-border);
    --fiction-combobox-dropdown-color: aliceblue;
    --fiction-listbox-item-border-normal: transparent;
    --fiction-listbox-item-border-hover: black;
    --fiction-listbox-item-background-hover: lightgray;
    --fiction-listbox-item-selcted-background: lightgray;
    --fiction-checkbox-color: black;
    --fiction-checkbox-disabled-color: dimgray;
    --fiction-input-background-color: aliceblue;
    --fiction-input-background-color-disabled: gainsboro;
}

/*  Make all controls use the following  */
.fiction-control,
.fiction-control *,
.fiction-control *::before,
.fiction-control *::after,
.fiction-control::before,
.fiction-control::after {
    box-sizing: border-box;
}

/*  Standard style for all controls  */
.fiction-control {
    margin: 2px;
    outline: 0;
    transition: opacity 0.3s;
}

/* Standard style for all input controls  */
.fiction-input {
}

    .fiction-input:not(.unconstrained-width) {
        width: 300px;
    }

.control-constrained {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.control-constrained-scrolling {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.fiction-fading-control {
    opacity: var(--fiction-control-not-focused-opacity);
}

    .fiction-fading-control:focus, .fiction-fading-control:focus-within, .fiction-fading-control:hover {
        opacity: var(--fiction-control-focused-opacity);
    }