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

    div {
        margin-left: 8px;
    }

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

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

        a {
            background: transparent no-repeat center center;
            background-size: var(--icon-size-default) var(--icon-size-default);

            display: inline-block;
            margin: 1px;
            width: var(--icon-size-default);
            height: var(--icon-size-default);

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

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

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

// Adjustments for some regions where messageboxes need a little more space
form.default fieldset,
section.contentbox {
    .messagebox {
        margin: 10px;
    }
}

$messagebox-icons: (
    info: 'info',
    success: 'accept',
    error: 'decline',
    exception: 'decline',
    warning: 'exclaim',
);

// Messagebox definitions
@mixin messagebox($name, $color, $background-color, $border-color: $color, $image: $name) {
    $icon-name: map-get($messagebox-icons, $name);
    $svg: icon-path($icon-name, clickable);

    div.messagebox_#{$name} {
      color: $color;
      background-color: $background-color;
      border-color: $border-color;
      position: relative;
      display: flex;
      align-items: center;

      // Der Kreis mit ::before
      &::before {
        content: "";
        width: 32px;  // Größe des Kreises
        height: 32px;
        background-color: $border-color;  // Kreisfarbe
        border-radius: 50%;  // Macht es rund
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 12px;  // Platz für den Text, je nach Bedarf anpassen
      }

      // Das Icon mit ::after auf dem Kreis
      &::after {
        content: "";
        width: 20px;  // Größe des Icons
        height: 20px;
        mask: url("#{$svg}") no-repeat center / contain;  // Maskierung mit dem Icon
        background-color: $background-color;  // Farbe des Icons
        position: absolute;
        top: 50%;
        left: 32px;
        transform: translate(-50%, -50%);  // Zentriert das Icon im Kreis
      }
    }
  }


@include messagebox(info, var(--color--info-secondary-contrast), var(--color--info-secondary), var(--color--info));
@include messagebox(success, var(--color--good-secondary-contrast), var(--color--good-secondary), var(--color--good));
@include messagebox(error, var(--color--warning-secondary-contrast), var(--color--warning-secondary), var(--color--warning));
@include messagebox(exception, var(--color--warning-secondary-contrast), var(--color--warning-secondary), var(--color--warning));
@include messagebox(warning, var(--color--attention-secondary-contrast), var(--color--attention-secondary), var(--color--attention), 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;
        box-sizing: border-box;
        vertical-align: middle;
        margin: auto;

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

        color: var(--color--font-primary);
        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;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        margin: auto;
    }
}