/*******************************
         Site Overrides
*******************************/


/* Fix for a semantic hover issue when hovering over the modal's search box */
.ui.search .action:hover {
    background: none !important;
}

/*******************************
        Content Color
*******************************/

/* Mixin to set the content color of a modal */
.setModalContentColor() when not (@contentColor = none) {
    .ui.modal > .content {
        color: @contentColor;
    }

}
.setModalContentColor();

/*******************************
        Fullscreen modal
*******************************/

.modals.dimmer .ui.fullscreen.modal,
.modals.dimmer .ui.fullscreen.scrolling.modal {
    position: absolute !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: 'touch';
    user-select: none;
}

/* Back button */
.ui.button.back-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.ui.fullscreen.modal,
.ui.fullscreen.modal > .content {
    background: @extensionsBackground;
}
.ui.fullscreen.modal {
    > .header {
        background: @extensionsHeaderBackground;
        color: @extensionsHeaderColor;
        border-radius: 0;
        display: flex;
        height: @mainMenuHeight;
        align-items: center;
        padding: 0 !important;

        .header-title {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            height: 100%;
        }
        .header-close {
            flex-basis: 20rem;
            padding: 1rem;
            order: -1;
            z-index: 1;
            .back-button {
                display: flex;
                align-items: center;
                font-weight: normal;
            }
        }
        .header-help {
            flex-basis: 20rem;
            padding: 1rem;
            display: flex;
            justify-content: flex-end;
            .help-button .icon {
                margin: 0;
            }
        }
    }

    > .content {
        padding: 1rem;
        flex: 1;
        overflow-y: auto;
        height: calc(100% - @mainMenuHeight);
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    .has-actions.content {
        height: calc(100% - (2 * @mainMenuHeight));
        padding: 1.2rem;
    }
    .ui.button.back-button, .ui.help-button {
        color: @extensionsHeaderColor !important;
        padding-left: 0 !important;
        /* &:focus {
            border: 2px solid yellow !important;
            border-radius: 1px;
        } */
    }
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    height: @mainMenuHeight;
    background: @extensionsSecondaryBackground;
    padding: 0 1rem;

    .divider {
        border: 0.5px solid @extensionsHeaderBackground;
        height: 70%;
        margin: 0.5rem;
        margin-right: 0.75rem;
        opacity: 0.3;
    }

    .ui.button {
        background-color: @white;
        color: @blue;
        border: 1px solid @white;
    }
    .ui.button:focus, .ui.button:hover {
        background-color: @white;
        border-color: darken(@white, 30%);
    }
    .ui.button.red {
        color: @red;
    }
}

@HCextensionsHeaderBackground: black;
@HCextensionsHeaderTextColor: white;

.hc {
    .ui.fullscreen.modal {
        .header {
            background: @HCextensionsHeaderBackground !important;
            color: @HCextensionsHeaderTextColor !important;
        }
        .header-actions {
            background: fade(@HCextensionsHeaderBackground, 30%);
        }
        .ui.back-button {
            background: none !important;
        }
    }
}

/* Since we add the close button at the end of the modal DOM (for accessibility)
   this adds the rounded border to the second last item (content) */
.ui.modal.closable:not(.fullscreen) > :nth-last-child(2) {
    border-bottom-left-radius: @borderRadius;
    border-bottom-right-radius: @borderRadius;
}

/* Mobile + Tablet */
@media only screen and (max-width: @largestTabletScreen) {
    .ui.fullscreen.modal {
        > .header {
            height: @mobileMenuHeight;
        }
        .has-actions.content {
            height: calc(100% - @mobileMenuHeight - @mainMenuHeight);
        }
    }
}

@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    .ui.fullscreen.modal {
        > .header {
            height: @thinMenuHeight;
        }
        .has-actions.content {
            height: calc(100% - @thinMenuHeight - @mainMenuHeight);
        }
    }    
}

/*******************************
        Modal Close Icon
*******************************/

.ui.modal .closeIcon {
    position: absolute;
    top: 0; 
    right: 0;
    height: 4.5rem;
    width: 4.5rem;
    outline: none;
    cursor: pointer;
}

.ui.modal > .closeIcon .close {
    position: absolute;
    top: @innerCloseTop;
    right: @innerCloseRight;
    color: @innerCloseColor;
    border-radius: 50%;
    font-size: 2.15rem;
    line-height: 2.15rem;
    transition: all .15s ease-out;
    height: 2.15rem;
    width: 2.15rem;
    padding: 0;
}
.ui.modal > .closeIcon:focus .close,
.ui.modal > .closeIcon:hover  .close {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
    outline: none;
    transform: scale(1.1);
}

.ui.button.icon.clear {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    color: @closeColor !important;
}
.ui.button.icon.clear:hover, .ui.button.icon.clear:focus {
    color: @closeColorHover !important;
}
.ui.button.icon.inverted.clear:hover, .ui.button.icon.inverted.clear:focus {
    color: @closeColorHover !important;
}

/* Mobile only */
@media only screen and (max-width: @largestMobileScreen) {

    .ui.modal .closeIcon {
        height: 3rem;
        width: 3rem;
    }
    .ui.modal > .closeIcon .close {
        top: 0.5rem;
        right: 0.5rem;
        margin: 0;
    }
}