@each $tuple in
    'ok' var(--green1-c) var(--green2-c) var(--green3-c),
    'warning' var(--yellow1-c) var(--yellow2-c) var(--yellow3-c),
    'error' var(--red1-c) var(--red2-c) var(--red3-c),
    'info' var(--blue1-c) var(--blue2-c) var(--blue3-c) {
    .log-lvl-#{nth($tuple, 1)} {
        background: #{nth($tuple, 2)};
        border: 1px solid #{nth($tuple, 3)};
        color: #{nth($tuple, 4)};
    }
}

#dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}

#app-message-container {
    position: absolute;
    margin: 0 auto;
    right: 10px;
    top: 85px;
    padding: 0;

    .log-msg {
        z-index: 11;
        margin: 0 auto;
        right: 0;
        top: 0;
        margin-bottom: 10px;
    }
}

.log-msg {
    position: relative;
    max-width: 250px;
    padding: 1rem;
    margin: 1rem;

    .close {
        position: absolute;
        top: 5px;
        right: 5px;
    }
}