tutorbookapp/tutorbook

@use '@material/dialog';

.scrimOuter {
  z-index: dialog.$z-index - 1;
  position: fixed;
  pointer-events: none;
  width: 0;
  height: 0;
  top: 0;
  left: 0;

  .scrimInner {
    z-index: dialog.$z-index - 1;
    width: 100%;
    top: 0;
    bottom: 0;
    position: fixed;
    pointer-events: none;

    .wrapper {
      box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
      background: var(--background);
      position: absolute;
      border-radius: 8px;
      font-weight: 500;
      opacity: 0;
      will-change: opacity;
      transition: opacity 200ms ease-in-out;
      pointer-events: auto;
      overflow: hidden;

      &.visible {
        opacity: 1;
      }
    }
  }
}

:global(html.dark) .wrapper {
  border: 1px solid var(--accents-2);
}

:global(html.system) {
  @media (prefers-color-scheme: dark) {
    .wrapper {
      border: 1px solid var(--accents-2);
    }
  }
}