:root {
    --action-text: var(--text-primary);
    --action-text-active: var(--text-primary);
    --action-text-hover: var(--text-primary);
    --action-text-disabled: var(--text-disabled);
    --action-border: var(--divider);
    --action-border-active: var(--divider);
    --action-border-hover: var(--primary-main);
    --action-border-disabled: var(--divider);
    --action-background: var(--background-default);
    --action-background-active: var(--background-secondary);
    --action-background-hover: var(--background-secondary);
    --action-background-disabled: var(--background-disabled);
    --action-shadow: var(--shadow-fine);
    --action-shadow-active: var(--shadow-fine);
    --action-shadow-hover: var(--shadow-2);
    --action-shadow-disabled: var(--shadow-fine);
    --action-transition: var(--transition-style);
}

html {
    background-color: var(--background-default);
    color: var(--text-primary);
}

a {
    color: var(--primary-main);
    text-decoration: none;
    transition: var(--transition-style);
}

a:visited {
    color: var(--primary-dark);
    transition: var(--transition-style);
}

a:hover {
    color: var(--secondary-main);
    transition: var(--transition-style);
}

a:active {
    color: var(--secondary-dark);
    transition: var(--transition-style);
}

header {
    background-color: var(--primary-dark);
    color: var(--text-titlebar);
    box-shadow: var(--shadow-6);
    div.profile-menu {
        .menu {
            background-color: var(--background-secondary);
            border-color: var(--divider);
            box-shadow: var(--shadow-3);
            h3 {
                color: var(--text-primary);
                span {
                    color: var(--text-secondary);
                }
            }
        }
        .menu::before {
            background-color: var(--background-secondary);
        }
    }
}

nav.main-nav {
    background-color: var(--background-secondary);
    color: var(--text-secondary);
    box-shadow: var(--shadow-1);
    menu li:hover {
        background-color: var(--background-tablerow);
    }
}

main {
    table {
        border-color: var(--divider);
        th {
            border-bottom-color: var(--divider);
        }
        tbody tr:nth-child(odd) {
            background-color: var(--background-tablerow);
        }
    }
    .accordion {
        border-color: var(--divider);
        .accordion-content {
            border-color: var(--divider);
        }
    }
    aside.ensembleHomeQuickLinks {
        background-color: var(--background-secondary);
        color: var(--text-secondary);
        box-shadow: var(--shadow-1);
        border-color: var(--divider);
    }
}

footer {
    background-color: var(--background-default);
}

a.button,
span.button,
button,
input,
textarea,
label.htmlEditor div.editorHolder,
select {
    color: var(--action-text);
    border-color: var(--action-border);
    background-color: var(--action-background);
    box-shadow: var(--action-shadow);

    transition: var(--action-transition);

    &:active,
    &:focus {
        color: var(--action-text-active);
        border-color: var(--action-border-active);
        background-color: var(--action-background-active);
        box-shadow: var(--action-shadow-active);
    }

    &:hover {
        color: var(--action-text-hover);
        border-color: var(--action-border-hover);
        background-color: var(--action-background-hover);
        box-shadow: var(--action-shadow-hover);
    }

    &:disabled {
        color: var(--action-text-disabled);
        border-color: var(--action-border-disabled);
        background-color:  var(--action-background-disabled);
        box-shadow: var(--action-shadow-disabled);
    }
}

button,
a.button {
    &.primary {
        color: var(--primary-contrastText);
        background-color: var(--primary-main);
    }
    &.secondary {
        color: var(--secondary-contrastText);
        background-color: var(--secondary-main);
    }
    &.error {
        color: var(--error-contrastText);
        background-color: var(--error-main);
    }
    &.warning {
        color: var(--warning-contrastText);
        background-color: var(--warning-main);
    }
    &.info {
        color: var(--info-contrastText);
        background-color: var(--info-main);
    }
    &.success {
        color: var(--success-contrastText);
        background-color: var(--success-main);
    }
}
.rte-toolbar section {
    border-right-style: solid;
    border-right-width: thin;
    border-right-color: var(--divider);
}
.rte-toolbar span.rte-btn {
    color: var(--action-text);
    transition: var(--action-transition);

    &:active,
    &:focus,
    &.enabled {
        color: var(--action-text-active);
    }

    &:hover {
        color: var(--action-text-hover);
        border-color: var(--action-border-hover);
        background-color: var(--action-background-hover);
        box-shadow: var(--action-shadow-hover);
    }

    &:disabled,
    &.disabled{
        color: var(--action-text-disabled);
        border-color: var(--action-border-disabled);
        background-color: var(--action-background-active); /* same */
        box-shadow: var(--action-shadow-disabled);
    }
}

span.label-text {
    background-color: var(--background-secondary);
    color: var(--text-secondary);
    border-color: var(--background-secondary);
    box-shadow: none;
    span.required {
        color: var(--error-dark);
    }
}

div.help-text {
    color: var(--text-secondary);
}

input[type=checkbox] {
    &:after {
        background-color: var(--error-light);
        color: var(--error-contrastText);

    }
    &:checked:after {
        background-color: var(--success-light);
        color: var(--error-contrastText);

    }
}

section.alert {
    box-shadow: var(--shadow-6);

    &.alert-info {
        background-color: var(--info-main);
        color: var(--info-contrastText);
        .heading a {
            color: var(--info-contrastText);
            &:hover {
                color: var(--info-dark);
            }
        }
    }

    &.alert-success {
        background-color: var(--success-main);
        color: var(--success-contrastText);
        .heading a {
            color: var(--success-contrastText);
            &:hover {
                color: var(--success-dark);
            }
        }
    }

    &.alert-warning {
        background-color: var(--warning-main);
        color: var(--warning-contrastText);
        .heading a {
            color: var(--warning-contrastText);
            &:hover {
                color: var(--success-dark);
            }
        }
    }

    &.alert-error {
        background-color: var(--error-main);
        color: var(--error-contrastText);
        .heading a {
            color: var(--error-contrastText);
            &:hover {
                color: var(--error-dark);
            }
        }
    }
}


/* ****************************** RANDOM THINGS ****************************** */

.render-attributes {
    label {
        .name {
            color: var(--text-secondary);
        }
    }
}

.avatar-samples {
    img {
        border-color: var(--divider);
        background-color: var(--background-secondary);
        box-shadow: var(--shadow-4);
    }
}

.spinner {
    border-color: var(--grey-400);
    background: linear-gradient(var(--secondary-light), var(--secondary-main), var(--secondary-dark));
    box-shadow: var(--shadow-1);
}
.spinner::before {
    background-color: var(--primary-dark);
    border-color: var(--grey-400);
    box-shadow: inset 0 0 10px -7px hsla(0, 0%, 100%, 0.075);
}
.yes {
    color: var(--success-main);
}
.no {
    color: var(--error-main);
}
.attendance-expected-yes {
    color: var(--success-main);
}
.attendance-expected-no {
    color: var(--error-main);
}
.attendance-expected-maybe {
    color: var(--warning-main);
}
button {
    &:disabled {
        &.attendance-actual-yes {
            background-color: var(--success-dark) !important;
            color: var(--success-contrastText) !important;
        }
        &.attendance-actual-no {
            background-color: var(--error-dark) !important;
            color: var(--error-contrastText) !important;
        }
    }
}
table.season-events {
    tr.past {
        color: var(--text-secondary);
    }
}
.text-disabled {
    color: var(--text-disabled);
}
code {
    background-color: var(--code-background);
    color: var(--code-text);
}