
.flipicon {
    transform: rotateZ(180deg);
}

.tox-tinymce {
    background: $card-bg;
    border: 0;

    .tox-toolbar-overlord .tox-sidebar-wrap .tox-statusbar {
        background: $card-header-bg;
    }

    .tox-statusbar .tox-editor-container{
        margin-top: 5px;
        background: $card-header-bg;
    }
}

.tox-toolbar-overlord {
    background-color: $card-header-bg;
}

.tox .tox-toolbar,
.tox-statusbar
 {
    background-color: #f9f9f9 !important;
}

// Ensure that when tinyMce is displayed correctly on IE11
// When it is on fullscreen mode
.tox-fullscreen {
    .modal-docked .modal-body,
    .page-modal .modal-body{
        overflow: visible;
    }
}

.tox-fullscreen.tox-tinymce {
    z-index: $zindex-tooltip + 10; // needs to be above all bootstrap components
}

.modal-tinymce .hidden-xs {
    @extend .visually-hidden;
}

.tinymce-large iframe{
    min-height: 300px;
}

label.visually-hidden + div.tox-tinymce {
    max-width: 100%;
    width: 99%;
}

.tox-editor-container .tox-wordcount {
    text-align: right;
}

.tox-active .tox-icon.tox-tbtn {
    transform: rotate(180deg);
    &:before {
        margin-top: 1px;
    }
}

.tox-toolbar__group {
    border: 0px !important;
}

.tox-tbtn:not(.tox-primary) {
    background-color: transparent !important;
}

//modal pop up
.tox .tox-dialog.mahara-dialog {

    .tox-dialog__title {
        font-family: $font-family-base;
        font-size: $font-size-lg;
        font-weight: $font-weight-light;
    }

    .tox-textfield,
    .tox-form__group .tox-selectfield select {
        font-family: $font-family-base;
        font-size: $font-size-base;
    }
}

.tox-dialog__footer-end {
    flex-direction: row-reverse;
}

.tox-dialog.mahara-dialog .tox-button {
    background-color: $btn-primary-bg;
    border-color: $btn-primary-border;
    &:hover {
        background-color: scale-color($btn-primary-bg, $lightness: -32%) !important;
        border-color: $btn-primary-border !important;
    }
}

.tox-dialog.mahara-dialog .tox-button.tox-button--secondary {
    background-color: transparent;
    border-color: transparent;
    text-decoration-line: underline;
    font-weight: $font-weight-normal;
    color: $btn-primary-bg;
    box-shadow: none;
    &:hover {
        background-color: scale-color($btn-secondary-bg, $lightness: -10.05%) !important;
        border-color: transparent !important;
    }
}
.tox-dialog.mahara-dialog .tox-button.tox-button--icon.tox-button--naked {
    background-color: transparent;
    border-color: transparent;
    &:hover {
        background-color: scale-color($btn-secondary-bg, $lightness: -10.05%) !important;
        border-color: transparent !important;
    }
}
