.modal {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(15px);
  background-color: rgba(var(--modal));
  color: var(--text200);
  transition: opacity 0.2s ease-in-out;

  &.open {
    opacity: 1;
    .inner {
      opacity: 1;
      transform: scale(1);
    }
  }

  &.closed {
    pointer-events: none;
    opacity: 0;

    .inner {
      opacity: 0;
      transform: scale(0.7);
    }
  }

  .inner {
    transition: all 0.3s ease-in-out;
    background-color: var(--bg200);
    padding: 20px;
    border-radius: var(--borderRadius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 60px 20px 20px;
    max-width: 400px;
    box-shadow: 0px 0px 5px 0px var(--shadow);

    .close {
      position: absolute;
      right: -38px;
      top: 0px;
      padding: 10px;

      border-radius: var(--borderRadius);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      transition: all 0.1s ease;

      &:hover {
        background-color: var(--bg300);
      }
    }

    .confirm {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

@media screen and (max-width: 992px) {
  .modal {
    .inner {
      .buttonWrapper {
        flex-direction: column;

        &.noWrap {
          flex-direction: row;
        }
      }
    }
  }
}