@each $name, $bg, $border, $text 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-#{$name} {
    background: $bg;
    border: 1px solid $border;
    color: $text;
  }
}

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

#hover-preview {
    position: absolute;
    top: 50px;
    left: 50px;
    padding: 1rem;
    border: 3px solid var(--bborder); // 3px due to scale
    background: var(--box-bg);
    transform: scale(0.3333);
    z-index: 5;
    overflow: auto;
    justify-content: center;
    align-items: center;
}

#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;
    }
}