/* Messages
   ========================================================================== */

/**
 * Alert labels.
 *
 * Example HTML:
 *
 * <span class="success">
 * <span class="error">
 * <strong class="success">
 * <strong class="error">
 */

li.success {
    background: $color-success-background;
}

.success:not(li) {
    color: $color-success-text;
}

li.warning {
    background: $color-warning-background;
}

.warning:not(li) {
    color: $color-warning-text;
}

li.error {
    background: $color-error-background;
}

.error:not(li) {
    color: $color-error-text;
}

li.information {
    background: $color-info-background;
}

.information:not(li) {
    color: $color-info-text;
}

@include dark-mode {
    li.success {
        background: $dark-color-success-background;
    }

    .success:not(li) {
        color: $dark-color-success-text;
    }

    li.warning {
        background: $dark-color-warning-background;
    }

    .warning:not(li) {
        color: $dark-color-warning-text;
    }

    li.error {
        background: $dark-color-error-background;
    }

    .error:not(li) {
        color: $dark-color-error-text;
    }

    li.information {
        background: $dark-color-info-background;
    }

    .information:not(li) {
        color: $dark-color-info-text;
    }
}

/**
 * Highlight background.
 *
 * Example HTML:
 *
 * <table>
 *     <tr>
 *         <td class="highlight></td>
 *         <td></td>
 *     </tr>
 * </table>
 */

.highlight {
    background: $color-highlight-box;
}

@include dark-mode {
    .highlight {
        background: $dark-color-highlight-box;
    }
}

/**
 * Alert boxes.
 *
 * Example HTML:
 *
 * <p class="alert-block success">
 * <p class="alert-block error">
 */

.alert-block {
    padding: 0.53846153846154em 1em; // 7px / 13px
    clear: both;
    border: 1px solid;

    @if $border-radius > 0 {
        border-radius: math.div($border-radius, 2);
    }

    &.success {
        border-color: $color-success-border;
        background: $color-success-background;
    }

    &.warning {
        border-color: $color-warning-border;
        background: $color-warning-background;
    }

    &.error {
        border-color: $color-error-border;
        background: $color-error-background;
    }

    &.information {
        border-color: $color-info-border;
        background: $color-info-background;
    }
}

@include dark-mode {
    .alert-block {
        &.success {
            border-color: $dark-color-success-border;
            background: $dark-color-success-background;
        }

        &.warning {
            border-color: $dark-color-warning-border;
            background: $dark-color-warning-background;
        }

        &.error {
            border-color: $dark-color-error-border;
            background: $dark-color-error-background;
        }

        &.information {
            border-color: $dark-color-info-border;
            background: $dark-color-info-background;
        }
    }
}

/**
 * Alert pills.
 *
 * Example HTML:
 *
 * <span class="alert-block alert-pill warning">
 */

.alert-pill {
    display: inline-block;
    padding: 0 0.33em;
    font-weight: normal;
}

/**
 * System messages.
 *
 * Example HTML:
 *
 * <div class="messagepane" id="messagepane">
 *     <span class="messageflash error" role="alert" aria-live="assertive">
 *         <span class="ui-icon ui-icon-alert"></span>
 *         Username not found.
 *         <a class="close"><span class="ui-icon ui-icon-close">Close</span></a>
 *     </span>
 * </div>
 */

#messagepane {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.messagepane {
    max-width: 100%;

    .messageflash {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 auto;
        padding: 0.53846153846154em 3.53846153846154em 0.53846153846154em 0.75em;

        @if $border-radius > 0 {
            border-radius: $border-radius $border-radius 0 0;
        }

        overflow-wrap: break-word;
        color: $color-text-inverse;

        @if $flat-theme < 1 {
            box-shadow: $standard-shadow;
        }

        text-align: left;

        &.success {
            background: $color-success-text;
        }

        &.warning {
            background: $color-warning-text;
        }

        &.error {
            background: $color-error-text;
        }
    }

    a {
        color: $color-text-inverse;
    }

    code {
        border-color: rgba(255, 255, 255, 0.66);
        background: transparent;
    }
}

@include dark-mode {
    .messagepane .messageflash {
        border: 1px solid $dark-color-border-extra-dark;
        border-bottom: 0;

        @if $flat-theme < 1 {
            box-shadow: $dark-standard-shadow;
        }

        &.success {
            background: $dark-color-success-background;
        }

        &.warning {
            background: $dark-color-warning-background;
        }

        &.error {
            background: $dark-color-error-background;
        }
    }
}

/*
 * System message close icon.
 */

.close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.53846153846154em;
    border-left: 1px solid rgba(255, 255, 255, 0.66);

    span {
        position: absolute;
        top: 50%;
        right: 0.692307692307692em; // 9px / 13px
        margin-top: -8px;
        opacity: 0.66;

        &:hover {
            opacity: 1;
        }
    }
}

@include dark-mode {
    .close {
        border-color: rgba(0, 0, 0, 0.4);

        span {
            opacity: 0.75;

            &:hover {
                opacity: 1;
            }
        }
    }
}

/*
 * System message flipped layout for RTL languages.
 */

[dir="rtl"] .messagepane .messageflash {
    padding: 0.53846153846154em 0.75em 0.53846153846154em 3.53846153846154em;
    text-align: right;
}

[dir="rtl"] .close {
    right: auto;
    left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.66);
    border-left: 0;

    span {
        right: auto;
        left: 0.692307692307692em; // 9px / 13px
    }
}

/*
 * Flash the alert message using CSS animation.
 */

#messagepane .messageflash {
    animation: messageflash 1s;
}