@import "@substrate-system/scroll-lock/css";

@media (prefers-reduced-motion: reduce) {
  *, :after, :before {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes SHOW-OVERLAY {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes SHOW-DIALOG {
  0% {
    transform: scale(.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes HIDE-OVERLAY {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes HIDE-DIALOG {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(.95);
  }
}

modal-window {
  & .modal-focus-trap {
    opacity: 0;
    width: 0;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  & .modal-scroll {
    width: 100%;
    height: 100%;
    z-index: var(--modal-overlay-z-index, 100000);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden auto;

    &.modal-visible {
      display: block;
    }

    &.modal-show .modal-overlay {
      animation-name: SHOW-OVERLAY;
      animation-duration: .25s;
    }

    &.modal-show .modal-dialog {
      animation-name: SHOW-DIALOG;
      animation-duration: .25s;
    }

    &.modal-hide .modal-overlay {
      opacity: 0;
      animation-name: HIDE-OVERLAY;
      animation-duration: .25s;
    }

    &.modal-hide .modal-dialog {
      animation-name: HIDE-DIALOG;
      animation-duration: .25s;
      transform: scale(.95);
    }
  }

  & .modal-content {
    & > h2 {
      margin-top: 0;
    }
  }

  & .modal-overlay {
    background-color: var(--modal-overlay-background-color, #00000080);
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  & .modal-dialog {
    background-color: var(--modal-dialog-background-color, #fff);
    border-radius: var(--modal-dialog-border-radius, 0);
    max-height: none;
    box-shadow: var(--modal-dialog-box-shadow, 0 2px 5px 0 #00000080);
    padding: var(--modal-dialog-padding, 1rem);
    width: var(--modal-dialog-width, 500px);
    border: none;
    display: block;
    position: relative;
  }

  & .modal-close {
    appearance: none;
    touch-action: none;
    user-select: none;
    color: var(--modal-close-color, #fff);
    background-color: var(--modal-close-background-color, #000);
    border-radius: var(--modal-close-border-radius, 50%);
    box-shadow: var(--modal-close-box-shadow, 0 0 0 1px #fff);
    display: var(--modal-close-display, block);
    cursor: pointer;
    font-family: var(--modal-close-font-family, "Arial", sans-serif);
    font-size: var(--modal-close-font-size, 23px);
    text-align: center;
    line-height: var(--modal-close-line-height, 26px);
    width: var(--modal-close-width, 26px);
    border: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -40%);

    &:hover {
      color: var(--modal-close-color-hover, #000);
      background-color: var(--modal-close-background-color-hover, #fff);
      box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
    }
  }

  & dialog {
    max-width: 80vw;
  }

  @supports selector(:focus-visible) {
    & .modal-close:focus-visible {
      color: var(--modal-close-color-hover, #000);
      background-color: var(--modal-close-background-color-hover, #fff);
      box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
    }
  }

  @supports not selector(:focus-visible) {
    & .modal-close:focus {
      color: var(--modal-close-color-hover, #000);
      background-color: var(--modal-close-background-color-hover, #fff);
      box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
    }
  }
}