/* --- MessageBoxes --------------------------------------------------------- */
div.messagebox {
    background: no-repeat 10px 10px;
    border: 2px solid;
    font-size: 12pt;
    font-weight: bold;
    margin: 5px 0;
    padding: 15px 15px 15px 55px;
    position: relative;
    text-align: left;

    &:first-child {
        margin-top: 0;
    }

    .messagebox_buttons {
        position: absolute;
        right: 3px;
        top: 3px;

        a {
            background: transparent no-repeat center center;
            background-size: 16px 16px;

            display: inline-block;
            margin: 1px;
            width: 16px;
            height: 16px;

            &.close,
            &.details {
                span { display: none; }
            }
            &.close {
                @include background-icon(decline);
            }
            &.details {
                @include background-icon(arr_eol-down);
            }
        }
    }

    &.details_hidden {
        .messagebox_buttons a.details {
            @include background-icon(arr_eol-up);
        }
        .messagebox_details { height: 0; }
    }
}

div.messagebox_details {
    font-weight: normal;
    overflow: hidden;
}

// Messagebox definitions
@mixin messagebox ($name, $color, $background-color, $border-color: $color, $image: $name) {
    div.messagebox_#{$name} {
        color: $color;
        background-color: $background-color;
        background-image: url("#{$image-path}/messagebox/#{$image}.png");
        background-size: 32px 32px;
        border-color: $border-color;
    }
}

@include messagebox(info, var(--black), var(--white), var(--base-color));
@include messagebox(success, var(--black), var(--white), var(--dark-green));
@include messagebox(error, var(--black), var(--white), var(--red));
@include messagebox(exception, var(--red), var(--red-20), var(--red));
@include messagebox(warning, var(--black), var(--white), var(--yellow-60), advice);

// Define modal messagebox
.modaloverlay {
    background: fade-out($base-color, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10vh 20vw;

    .messagebox {
        display: inline-block;
        zoom: 1; // IE :(
        box-sizing: border-box;
//        position: relative;
        vertical-align: middle;
        margin: auto;

        position: relative;
        max-height: 50%;
        min-width: 30em;
        max-width: 50%;
        width: auto;

        color: #000;
        border-color: var(--yellow);
        background-color: white;
        background-image: url("@{image-path}/messagebox/question.png");
        background-size: 32px 32px;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);

        .content {
            max-height: 200px;
            overflow: auto;
            text-align: left;
        }
        .buttons {
            margin-top: 1em;
            text-align: center;
        }
    }
    .ui-dialog {
        display: inline-block;
        zoom: 1; // IE :(
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        margin: auto;
    }
}