_modal.scss

@import '../base/color';
@import '../base/breakpoint';

.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: rgba(27, 28, 34, 0.85);
  &.modal-opened {
    display: flex;
  }
  .modal-box {
    background: $grey-background;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 36rem;
    @media #{$large-phone} {
      width: 20rem;
    }
    max-width: 100%;
    max-height: 30rem;
    @media #{$large-phone} {
      max-height: unset;
    }
    transform: translate(-50%, -50%);
    padding: 1rem 0 0 0;
    box-sizing: border-box;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    &.modal-box-bordered {
      border: 1px solid $blue-40;
    }
    &.yellow-border {
      border: 1px solid $gold-40;
    }
    .modal-close-button {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      padding: 5px 5px;
    }
    .modal-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $text-white;
    }
    .wm-header {
      background: $multi-color-radial-gradient;
      background-clip: 'text';
      -webkit-background-clip: text;
      color: transparent;
      margin-top: 2rem;
    }
    .wm-name {
      background: $multi-color-radial-gradient;
      background-clip: 'text';
      -webkit-background-clip: text;
      color: transparent;
      margin-bottom: 1.25rem;
    }
    .button-ok {
      width: 90%;
      margin-bottom: 2rem;
    }
    .wm-perso {
      text-align: center;
      width: 60%;
      margin: 1rem;
    }
    .wm-connect {
      text-align: center;
      width: 88%;
      margin: 1rem;
    }
  }
}