// TODO: switch to JUNO component with inside token
$root-zIndex: 1400;

.root,
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
}

.root {
  width: 100%;
  height: 0;
  z-index: $root-zIndex;
  pointer-events: none;
}

.backdrop {
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.4);
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 20px;

  &:first-child {
    margin-top: 12px;
  }
  & + .container {
    margin-top: 8px;
  }

  // using double selector to make selector priority higher
  .snackbar.snackbar {
    min-width: auto;

    // fix IE 11 wrong offset problem
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      width: 100%;
    }
  }
}