/**
 * This file provides the design styles for message block
 */

.msg-area {
    clear: both;
    padding-top: 1.6rem;

    div {
        line-height: 135%;
    }

    &:empty {
        display: none;
    }
}

div.success,
div.error,
div.info,
div.notify {
    display: block;
    border: none;
    border-left: solid 0.5rem var(--color-shade-4);
    border-radius: 0.5rem;
    padding: 1em;
    background-image: none;
    background-color: var(--color-shade-1);

    &::before {
        display: inline-block;
        content: "";
        margin: 0.3em 0.2em 0 0;
        width: 1em;
        height: 1em;
        mask-size: contain;
        mask-position: center top;
        mask-repeat: no-repeat;
        background-color: currentColor;
        vertical-align: top;
    }

    &.success {
        color: var(--color-success);

        &::before {
            mask-image: url(img/tick_small.svg);
        }
    }

    &.error {
        border-left-color: var(--color-error);
        color: var(--color-foreground);

        &::before {
            background-color: var(--color-error);
            mask-image: url(img/power.svg);
        }
    }

    &.info {
        color: var(--color-foreground);

        &::before {
            mask-image: url(img/info.svg);
        }
    }

    &.notify {
        border-left-color: var(--color-warning);
        color: var(--color-foreground);

        &::before {
            background-color: var(--color-warning);
            mask-image: url(img/warning.svg);
        }
    }

    a {
        text-decoration: underline;

        &:hover,
        &:focus,
        &:active {
            text-decoration: none;
        }
    }
}