@import '../../../ui/imports/colours';
@import "../../../ui/imports/mixins/border-box";
@import "../../../ui/imports/mixins/border-radius";

@dialog-background-color: var(--ds-surface, @aui-color-N0);
@dialog-border-color: var(--ds-border, @aui-color-N30);
@dialog-header-background-color: var(--ds-surface, @aui-color-N0);
@dialog-headings-color: var(--ds-text, @jira-color-text);
@dialog-subtle-text: var(--ds-text, @aui-color-text);

@footer-container-padding: 10px;

// Functional styles
.jira-dialog:not(.aui-dialog2) {
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 3000;

    .dialog-blanket {
        position: absolute;
        top: 0;
        left: 0;
    }

    .jia-dialog-content {
        .border-box();

        .aui-dialog-content { // The class used to pick content up and place it in a JIRA Form Dialog
            position: relative;
            overflow: auto;
            padding: 0; // for interop with JIRA's form markup, the padding needs to be applied elsewhere
        }
    }
}

// Aesthetics
.jira-dialog {
    background: @dialog-header-background-color;
    border: 1px solid @dialog-border-color;
    .border-radius(4px);
    overflow: hidden;
    box-shadow: var(--ds-shadow-overflow, 0 8px 16px -4px @aui-color-N50A, 0 0 1px @aui-color-N60A);

    .dialog-blanket {
        opacity: 0.2;
        background: var(--ds-blanket, #000);
    }

    /* dialog header styles */
    .jira-dialog-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: @dialog-header-background-color;
        border-bottom: 2px solid @dialog-border-color;
        .border-box();
        height: 56px;
        margin: 0;
        overflow: hidden;
        padding: 15px 20px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;

        h2 {
            color: @dialog-headings-color;
            font-weight: normal;
            font-size: 20px;
            line-height: 1.5;
            margin: 0;
            overflow: hidden;
            padding: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            outline: 0;
        }
    }

    /* dialog navigation styles */
    .dialog-menu-group {
        .border-box();
        border-right: 2px solid @dialog-border-color;
        height: 100%;
        margin: 0;
        padding: 10px 10px 20px;
        width: 25%;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li {
            margin: 0;
            padding: 0;
        }

        .dialog-menu-item {
            background: none;
            border: 0;
            color: var(--jira-color-menuTxtColour, var(--ds-text-subtlest, @jira-pagenav-menuitem-text-color));
            cursor: pointer;
            font-family: inherit;
            font-size: inherit; /* = 14px */
            line-height: 1.1428; /* 16px equiv */
            padding: 7px 10px;
            margin: 0;
            text-align: left;
            text-decoration: none;
            width: 100%;

            &:hover,
            &:focus {
                background-color: var(--ds-surface, @jira-pagenav-menuitem-background-focus-color);
            }
            &.selected {
                color: var(--ds-text-subtlest, @jira-pagenav-menuitem-text-selected-color);
                font-weight: bold;
            }
            &:active,
            &.selected:active {
                background-color: var(--jira-color-menuSeparatorColour, var(--ds-background-selected, @jira-pagenav-menuitem-background-active-color));
                color: var(--jira-color-menuTxtColour, var(--ds-text-selected, @jira-pagenav-menuitem-text-active-color));
            }
        }

        + .dialog-pane {
            padding-left: 0;
        }
    }

    /* dialog body content styles */
    .jira-dialog-content {
        background: @dialog-background-color;
    }

    /* dialog footer styles */
    .buttons-container {
        background: @dialog-header-background-color;
        .border-box();
        border-top: 2px solid @dialog-border-color;
        clear: both;
        height: 51px; /* NOTE: This value is hard-coded in dialog.js as BUTTONS_HEIGHT */
        overflow: hidden;
        padding: @footer-container-padding;
        text-align: right;
        white-space: nowrap;
        width: 100%;

        .hint-container {
            color: @dialog-subtle-text;
            margin: 0;
            padding: 5px 10px;
            text-align: left;

            kbd { vertical-align: middle; }
        }
        .buttons {
            float: right;
            white-space: nowrap;
        }
    }
}

// Dialog content style overrides
.jira-dialog-content {
    margin: 0;
    padding: 0;

    .form-body {
        position: relative;
        overflow: auto;
        padding: 20px; // most dialogs have this nested inside either aui-popup-content or aui-dialog-content
    }

    .buttons-container {
        margin: 0;
        padding: @footer-container-padding;
        min-height: 0;
        overflow: hidden;
    }

    .buttons {
        padding: 0;
        text-align: right;
    }

    form.aui {
        margin: 0;
        padding: 0;

        .buttons-container {
            margin: 0;
            padding: @footer-container-padding;
            min-height: 0;
            overflow: hidden;
        }
    }

    .dialog-error {
        padding: 10px 20px;
    }
}

// Modeless dialog
.jira-dialog-modeless {
    &.jira-dialog {
        right: 0;
        bottom: 0;
        top: auto;
        left: auto;
    }

    .jira-dialog-heading {
        height: 46px;
        padding: 8px 10px;

        h2 {
            font-size: 18px;
            line-height: 1.7;
        }
    }

    &.jira-dialog-not-visible {
        visibility: hidden;
    }
}