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

.menubar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border: 0;
}

.ui.menu.fixed {
    position: absolute;
}

.menubar .ui.menu {
    height: @mainMenuHeight;
    min-height: @mainMenuMinHeight !important;
}

.menubar .item > .button {
    margin-right: 0.25rem;
    padding: 0.6rem;
}

.menubar .accessibleMenu .ui.item.link {
    height: @mainMenuHeight;
    min-height: @mainMenuMinHeight !important;
}

.menubar .accessibleMenu .ui.item.link.inverted:hover {
    background: var(--pxt-header-background);
}

@media only screen and (max-width: @largestMobileScreen) {
    .menubar .left.menu > .item.icon:not(.logo),  .menubar .right.menu > .item.icon:not(.logo) {
        width: 48px;

        & > i.icon {
            margin-left: -8px;
        }
    }
}

@media only screen and (max-width: @largestTabletScreen) {
    .menubar .ui.menu {
        height: @mobileMenuHeight !important;
        min-height: @mobileMenuHeight !important;
    }
    .sandbox .menubar .ui.menu {
        height: @sandboxMobileMenuHeight !important;
        min-height: @sandboxMobileMenuHeight !important;
    }
    .ui.menu .item > i.icon {
        margin: 0;
    }
    .menubar .accessibleMenu .ui.item.link {
        height: @mobileMenuHeight !important;
        min-height: @mobileMenuHeight !important;
    }
}

@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    .menubar .ui.menu {
        height: @thinMenuHeight !important;
        min-height: @thinMenuHeight !important;
    }
    .menubar .accessibleMenu .ui.item.link {
        height: @thinMenuHeight !important;
        min-height: @thinMenuHeight !important;
    }
}

.ui.inverted.menu .active.item {
    background: rgba(255, 255, 255, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

#mainmenu.ui.link.inverted.menu,
#mainmenu.ui.inverted.menu {
    background-color: var(--pxt-header-background);

    .menu > .dropdown.item,
    .menu > .link.item.icon {
        border: @homeHeaderBorderSize solid transparent;
    }

    .menu > .dropdown.item:focus,
    .menu > .link.item.icon:focus {
        background: var(--pxt-neutral-alpha10);
        color: @invertedHoverColor;
        border: @homeHeaderBorderSize solid var(--pxt-neutral-stencil3);
        outline: 1px ridge black;
    }
}

#mainmenu .link-button {
    font-family: @segoeUIFont;

    &.link.ui.item:hover {
        > .text { text-decoration: underline }
        > .icon { transform: none }
    }

    .text {
        font-size: @smallFontSize;
        font-weight: 400;
        text-transform: uppercase;
    }
}

.ui.vertical.menu .item > .label {
    background-color: #8F8F8F;

    &:hover,
    &:focus {
        background: #6C6C6C;
    }
}

/* Tutorial mode */
.tutorial .ui.inverted.menu {
    background: var(--pxt-header-background) !important;
}

.debugger .ui.inverted.menu {
    background: var(--pxt-primary-background) !important;
}