.dialog
{
    position: relative;

    max-width: steps(64);
    min-width: $window-min-width;
    padding: steps(2) steps(2) steps(3);
    margin: auto;

    background: $color-background-lightest;

    @include for-at-least-normal-tablets
    {
        padding: steps(4);
        margin-top: steps(6);
        margin-bottom: steps(6);
    }

    @include for-desktops
    {
        margin-top: steps(10);
        margin-bottom: steps(10);
    }

    // in normal dialogs close button is last child,
    // so we need to reset bottom margin for penultimate element
    &:not(.modal) > *:nth-last-child(2)
    {
        margin-bottom: 0;

        &.actions
        {
            @include for-at-least-tablets
            {
                margin-bottom: steps(-1);
            }
        }
    }

    > header
    {
        @include dialog-header;
    }

    > .title
    {
        @include dialog-title;
    }

    .list-heading
    {
        @include normal-text(0, steps(0.5));

        border-bottom: 1px solid $color-border-normal;
        margin-bottom: steps(1.5);

        @include for-at-least-normal-tablets
        {
            @include baseline-paddings(18px, steps(3), 0, steps(2));

            margin-bottom: steps(2);
        }
    }

    dl
    {
        @include for-at-least-normal-tablets
        {
            display: flex;
            flex-wrap: wrap;
        }
    }

    dt, dd
    {
        @include small-text;
    }

    dt
    {
        font-weight: bold;
        color: $color-text-darker;

        @include for-at-least-normal-tablets
        {
            width: 32%;
        }
    }

    dd
    {
        @include for-at-most-small-tablets
        {
            &:not(:last-child)
            {
                margin-bottom: steps(2);
            }
        }

        @include for-at-least-normal-tablets
        {
            width: 68%;
            padding-left: steps(3);
        }
    }

    dl.properties
    {
        @include for-at-least-normal-tablets
        {
            dd:not(:last-child)
            {
                margin-bottom: steps(1.5);
            }
        }
    }

    ul.types
    {
        li
        {
            @include clickable;
            @include small-text(steps(1), steps(1));

            padding-left: $gutter;
            padding-right: $gutter;
            border: solid $color-border-normal;
            border-width: 1px 1px 0;
            margin-top: -1px;

            @include for-at-least-normal-tablets
            {
                @include baseline-paddings(16px, steps(2.5), steps(2), steps(1.5));

                padding-left: steps(3);
                padding-right: steps(3);
            }

            &:last-child
            {
                border-bottom: 1px solid $color-border-normal;
                margin-bottom: -1px;
            }
        }

        a
        {
            @include alternative-link;

            font-weight: bold;
            text-decoration: none;
        }
    }

    .actions
    {
        @include button-set;

        text-align: center;

        @include for-at-least-normal-tablets
        {
            margin-top: steps(3);
        }
    }
}

.dialog.loader
{
    @include alert-dialog("cogwheel");

    .heading
    {
        &::before
        {
            width: steps(7.5);
            height: steps(7.5);

            @keyframes rotate
            {
                to
                {
                    transform: rotate(360deg);
                }
            }

            animation: rotate 3s linear infinite;
        }

        .progress
        {
            @include sans-serif-font-family;

            display: block;
            margin-bottom: steps(3);

            color: $color-brand-darker;

            &:not(.enabled)
            {
                display: none;
            }

            &::before
            {
                content: attr(data-value);

                font-size: 28px;

                @include for-at-least-normal-tablets
                {
                    font-size: 38px;
                }
            }

            &::after
            {
                content: " %";
            }
        }
    }
}

.dialog.warning,
.dialog.failure
{
    @include alert-dialog("exclamation");
}

.dialog.success
{
    @include alert-dialog("success", $color-success);
}

.dialog.session
{
    @include alert-dialog;

    .heading time
    {
        @include sans-serif-font-family;

        display: block;

        font-size: 28px;
        color: $color-brand-darker;

        @include for-at-least-normal-tablets
        {
            font-size: 38px;
        }
    }

    .actions
    {
        .button.end
        {
            @include alternative-button;
        }
    }
}

// magnific popup default overrides

.mfp-figure figure
{
    margin: 0;
}

.mfp-img
{
    display: block;
    margin: auto;

    @include for-at-least-normal-tablets
    {
        padding-top: $mfp-image-padding-top;
        padding-bottom: $mfp-image-padding-bottom;
    }
}

.mfp-bottom-bar
{
    left: 0;

    width: 100%;

    cursor: auto;

    @include for-at-most-small-tablets
    {
        position: fixed;
        bottom: 0;

        background: rgba($color-background-inverted-normal, 0.8);
    }

    @include for-at-least-normal-tablets
    {
        position: absolute;
        top: 100%;

        margin-top: -$mfp-image-padding-top;
    }
}

.mfp-title,
.mfp-counter
{
    &:empty
    {
        display: none;
    }
}

.mfp-title
{
    @include normal-text;
    @include antialiasing;

    margin-bottom: 0;

    color: $color-background-lightest;
    text-align: center;

    @include for-at-most-small-tablets
    {
        padding-top: steps(0.5) + 2px;
    }
}

button.mfp-close,
button.mfp-arrow
{
    position: absolute;

    width: steps(5);
    height: steps(5);
    padding: 0;

    line-height: steps(5);
    background: $color-link-normal;
    text-align: center;

    &:hover,
    #{$keyboard-only-focus}
    {
        background-color: $color-link-active;
    }

    &::before
    {
        display: block;
        width: steps(2);
        height: steps(2);
        padding: steps(1.5);

        line-height: steps(2);
    }
}

button.mfp-close
{
    top: 0;
    right: 0;

    &::before
    {
        content: svg-image-data-url("x", $color-background-lightest);
    }

    > span
    {
        display: none;
    }

    .mfp-image-holder &
    {
        right: 0;

        width: steps(5);
        padding: 0;

        text-align: center;

        @include for-at-least-normal-tablets
        {
            top: $mfp-image-padding-top;
        }
    }
}

button.mfp-arrow
{
    top: 50%;

    margin-top: steps(-2.5);

    transform: none;

    &-left
    {
        left: 0;

        &::before
        {
            content: svg-image-data-url("arrow-left", $color-background-lightest);
        }
    }

    &-right
    {
        right: 0;

        &::before
        {
            content: svg-image-data-url("arrow-right", $color-background-lightest);
        }
    }
}

.mfp-gallery .mfp-figure
{
    cursor: pointer;
}

.mfp-image-holder .mfp-content
{
    max-width: 100%;
}


// fade animation

.mfp-bg
{
    @include transition("opacity");

    opacity: 0;

    // overlay animate in
    &.mfp-ready
    {
        opacity: $mfp-overlay-opacity;
    }

    // overlay animate out
    &.mfp-removing
    {
        opacity: 0;
    }
}

.mfp-wrap
{
    .mfp-content
    {
        @include transition("opacity");

        opacity: 0;
    }

    // content animate it
    &.mfp-ready .mfp-content
    {
        opacity: 1;
    }

    // content animate out
    &.mfp-removing .mfp-content
    {
        opacity: 0;
    }
}


// popover dialog

.mfp-bg.popover
{
    @include for-at-least-normal-tablets
    {
        background: none;
    }
}

.mfp-wrap.popover .mfp-content
{
    height: 100%;
    vertical-align: top;

    @include for-at-least-normal-tablets
    {
        height: auto;
        vertical-align: bottom;
    }

    .dialog
    {
        max-width: none;
        min-height: 100%;

        @include for-at-least-normal-tablets
        {
            max-width: steps(66);
            min-height: 0;
            margin: steps(4) steps(4) 0 auto;

            box-shadow: inset 0 0 0 1px $color-border-normal, 0 -2px 10px 0 create-rgba($color-text-darker, 0.35);
        }
    }
}
