// 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-contentdialog {
    /* Dialog's positioning and sizing rules:
      - Horizontal alignment
        - Always horizontally centered
      - Vertical alignment
        - If height of window < @dialogVerticallyCenteredThreshold, dialog is attached to top of window
        - Otherwise, dialog is vertically centered
      - Width:
        - Always stays between @minWidth and @maxWidth
        - Sizes to width of window
      - Height:
        - Always stays between @minHeight and @maxHeight
        - If window height < @maxHeight and dialog height > 50% of window
          height, dialog height = window height
        - Otherwise, dialog height sizes to its content
     */

    @minWidth: 320px;
    @maxWidth: 456px;
    @minHeight: 184px;
    @maxHeight: 758px;
    @dialogVerticallyCenteredThreshold: 640px;

    &.win-contentdialog-verticalalignment {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        overflow: hidden;
        
        &.win-contentdialog-devicefixedsupported {
            // We have to use different techniques for sizing the height due to browser bugs:
            //   - In Edge, height:100vh doesn't work properly on elements with
            //     position:-ms-device-fixed so we use top:0 and bottom:0.
            //   - In Chrome, using top:0 and bottom:0 breaks percentage heights within the
            //     flexbox so we use height:100vh.
            position: -ms-device-fixed;
            height: auto;
            bottom: 0;
        }

        display: none;
        &.win-contentdialog-visible {
            #flex > .display-flex();
        }
        #flex > .flex-flow(column; wrap);
        #flex > .justify-content(center); /* center on flex axis (vertically) */
        #flex > .align-content(center); /* maintain horizontal centering when the flexbox has 2 columns */
    }

    .win-contentdialog-backgroundoverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .win-contentdialog-dialog {
        #flex > .display-flex();
        #flex > .flex-direction(column);

        #flex > .flex(@grow: 1; @shrink: 1);
        z-index: 1; /* Put the dialog's body above the backgroundoverlay */

        outline-style: solid;
        outline-width: 1px;
        box-sizing: border-box;
        padding: 18px 24px 24px 24px;
        
        width: 100%;
        min-width: @minWidth;
        max-width: @maxWidth;

        min-height: @minHeight;
        max-height: @maxHeight;

        /* Center horizontally */
        margin-left: auto;
        margin-right: auto;
    }

    /* Purpose of this element is to control the dialog body's height based on the height
       of the window. The dialog body's height should:
         - Match height of window when dialog body's intrinsic height < 50% of window height.
           In this case, .win-contentdialog-column0or1 will be in column 1 allowing
           the dialog's body to fill the height of the window.
         - Size to content otherwise.
           In this case, .win-contentdialog-column0or1 will be in column 0 preventing
           the dialog's body from growing.
       This element works by moving between flexbox columns as the window's height changes.
     */
    .win-contentdialog-column0or1 {
        #flex > .flex(@grow: 10000; @shrink: 0; @basis: 50%);
        width: 0;
    }

    @media (min-height: @dialogVerticallyCenteredThreshold) {
        .win-contentdialog-dialog {
            #flex > .flex(@grow: 0; @shrink: 1); // shrink: 1 so dialog never becomes taller than window
        }

        .win-contentdialog-column0or1 {
            display: none;
        }
    }

    .win-contentdialog-scroller {
        #flex > .flex(@grow: 1; @shrink: 1);

        #flex > .display-flex();
        #flex > .flex-direction(column);
        overflow: auto;
    }

    .win-contentdialog-title {
        #flex > .flex(@grow: 0; @shrink: 0);
        ._win-type-subtitle();
        margin: 0;
    }
    .win-contentdialog-content {
        #flex > .flex(@grow: 1; @shrink: 0);
        ._win-type-body();
    }

    .win-contentdialog-commands {
        #flex > .flex(@grow: 0; @shrink: 0);
        #flex > .display-flex();
        margin-top: 24px;
        margin-right: -4px; /* Chop off margin on last command */
    }

    .win-contentdialog-commandspacer {
        visibility: hidden;
    }

    .win-contentdialog-commands > button {
        /* Each command should have the same width. Flexbox distributes widths using each
           item's width and flex-grow as weights. Giving each command a flex-grow of 1
           and a width of 0 causes each item to have equal weights and thus equal widths.
         */
        #flex > .flex(@grow: 1; @shrink: 1);
        width: 0;

        margin-right: 4px; /* 4px of space between each command */
        white-space: nowrap;
    }
}