@custom-selector :--all-special-colors
    .special-white,
    .special-green,
    .special-blue;

/**
 * Styles for all special colors
 */
:--all-special-colors {
    & aside div .codex-special__toolbar {
        background-color: #ffed14 !important;
    }

    & .main-aside .user_panel:hover {
        background: transparent !important;
    }

    & .island {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    & .island div,
    & .island header,
    & .island footer,
    & .island form {
        background: transparent !important;
    }

    & .button {
        background-color: #2b2c2d !important;
        color: #fff !important;
    }

    & .button.master,
    & input[type=submit] {
        background-color: #1b439c !important;
    }
}

html body aside .codex-special__toolbar {
    padding: 15px var(--islandPadding) !important;
    font-size: 14px !important;
}

/**
 * Big version
 */
.special-big {
    & .site-footer,
    & .site-head {
        font-size: 13px !important;
        line-height: 1.4em;
    }
}

/**
 * Remove branding
 */
.special-big,
:--all-special-colors {
    & .main-aside {
        position: static;
        margin-top: 0;
    }

    & .branding {
        display: none;
    }
}

/**
 * Black version
 */
.special-white {
    & .island textarea,
    & .island input {
        background-color: #0c0c0c !important;
    }
}

/**
 * Blue
 */
.special-blue {
    & .island {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

.codex-special__toolbar-text {
    vertical-align: baseline !important;
}
