// Copyright (c) Microsoft Corporation.  All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.

@import "base.less";
@import "mixins.less";

.win-hub {
    height: 100%;
    width: 100%;
    /* Necessary for detecting when this element has resized */
    position: relative;
}
.win-hub-progress {
    position: absolute;
    top: 10px;
    width: 100%;
    z-index: 1;
}
.win-hub-viewport {
    height: 100%;
    width: 100%;
    -ms-scroll-snap-type: proximity;
    -webkit-overflow-scrolling: touch;
}
.win-hub-horizontal .win-hub-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.win-hub-vertical .win-hub-viewport {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}
.win-hub-surface {
    display: inline-block;
}
.win-hub-vertical .win-hub-surface {
    width: ~"calc(100% - 24px)";
    padding: 0px 12px 8px 12px;
    margin-top: -24px; /* Keep in sync w/ hub-section padding-top */
}
.win-hub-horizontal .win-hub-surface {
    height: 100%;
    padding-left: 12px;
    
    .RTL({
        padding-left: 0;
        padding-right: 12px;
    });
}
.win-hub-section {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}
.win-hub-horizontal {
    .win-hub-section {
        height: 100%;
        padding-right: 24px;
        
        .RTL({
            padding-right: 0;
            padding-left: 24px;
        });
    }
    
    .win-hub-section-header {
        // Put margin-top on header instead of section to enable full height hero sections
        margin-top: 62px;
    }
}
.win-hub-vertical {
    .win-hub-section {
        width: 100%;
        padding-top: 24px; /* Keep in sync w/ hub-surface margin-top */
    }
}
.win-hub-section-header {
    margin-bottom: 9px;
    height: 28px;
}

// Override default button styles
// Button is used so that both piece of UI change color. button:active becomes active if the children are pressed.
button.win-hub-section-header-tabstop,
html.win-hoverable button.win-hub-section-header-tabstop:hover,
button.win-hub-section-header-tabstop:hover:active {
    touch-action: manipulation;
    width: 100%;
    background-color: transparent;
    border: 0;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}
button.win-hub-section-header-tabstop:focus {
    outline: none;
}

// The "-ms-keyboard-active" pseudo is not always supported. When it is not supported
// it will be treated as a CSS parse error and will throw out all rules in the current
// CSS rule group. For this reason, never group it with other rules.
button.win-hub-section-header-tabstop:-ms-keyboard-active {
    background-color: transparent;
}
.win-hub-section-header-wrapper {
    #flex > .display-inline-flex();
    #flex > .flex-direction(row);
    #flex > .align-items(stretch);
    width: 100%;
    outline: none;
}
.win-hub-section-header-content {
    ._win-type-subtitle(1.5);
    #flex > .flex(@grow: 1);
    text-align: left;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;

    .RTL({
        text-align: right;
    });
}
.win-hub-section-header-chevron {
    display: none;
}
.win-hub-section-header-interactive .win-hub-section-header-chevron {
    #flex > .flex(@shrink: 0);
    display: inline-block;
    margin-left: 24px;
    line-height: 1.5;
    padding-top: 7px;
    text-align: right;
    vertical-align: bottom;

    .RTL({
        text-align: left;
        margin-left: 0;
        margin-right: 24px;
    });
}
.win-hub-horizontal .win-hub-section-content {
    // 99px represents total height of section header
    height: ~"calc(100% - 99px)";
}
.win-hub-vertical .win-hub-section-content {
    width: 100%;
}