/*******************************
         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;
    left: 0 !important;
    transform: none;
    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;
}

.modals.dimmer .ui.scrolling.modal {
    margin: 3.5rem auto !important;
    top: auto;
    position: absolute;
}

.ui.modal {
  position: fixed;
  display: none;
  z-index: @zIndex;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);

  background: var(--pxt-neutral-background1);
  border: @border;
  box-shadow: @boxShadow;
  transform-origin: @transformOrigin;

  flex: 0 0 auto;

  border-radius: @borderRadius;
  user-select: text;
  will-change: top, left, margin, transform, opacity;
}

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

.ui.fullscreen.modal,
.ui.fullscreen.modal > .content {
    background: var(--pxt-target-background1);
    color: var(--pxt-target-foreground1);
}
.ui.fullscreen.modal {
    > .header {
        background-color: var(--pxt-header-background) !important;
        color: var(--pxt-header-foreground) !important;
        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: var(--pxt-header-foreground) !important;
        padding-left: 0 !important;

        &:focus, &:hover {
            background: rgba(0,0,0,.1);
        }
    }
}

.ui.modal .ui.button:focus {
    outline: 1px solid @white;
    outline-offset: -7px;
}

.ui.modal .ui.button.neutral:focus {
    outline: 1px solid var(--pxt-neutral-foreground2);
    outline-offset: -7px;
}

.ui.modal .ui.button.approve.secondary:focus {
    background: rgba(0,0,0,0.75);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    height: @mainMenuHeight;
    background: var(--pxt-neutral-alpha20);
    color: var(--pxt-header-foreground);
    padding: 0 1rem;

    .divider {
        border: 0.5px solid var(--pxt-header-background);
        height: 70%;
        margin: 0.5rem;
        margin-right: 0.75rem;
        opacity: 0.3;
    }

    .ui.button {
        background-color: var(--pxt-colors-blue-foreground);
        color: var(--pxt-colors-blue-background);
        border: 1px solid var(--pxt-colors-blue-foreground);
    }
    .ui.button:focus, .ui.button:hover {
        color: var(--pxt-colors-blue-hover);
    }
    .ui.button.red {
        color: var(--pxt-colors-red-background);
    }
}

@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;
    height: 2.15rem;
    width: 2.15rem;
    padding: 0;
}
.ui.modal > .closeIcon:hover .close {
    outline: solid 4px var(--pxt-neutral-alpha20);
    outline-offset: 2px;
}

.ui.modal > .closeIcon:focus-visible .close {
    outline: solid 4px var(--pxt-focus-border);
    outline-offset: 2px;
}

.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;
    }
}

/*******************************
        Modal Fields
*******************************/

.modal .grouped.fields {
    margin-bottom: 0.5rem;
}