$brave-modal-borderRadius: 8px;

.modal-container {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  z-index: 9001;
  visibility: hidden;
}

.modal-panel {
  max-width: $spacer * 40;
  min-width: $spacer * 30;
  padding: $spacer * 2 $spacer * 2;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.7);
  transition: all 200ms;
  text-align: left;
  background: white;
  border-radius: $brave-modal-borderRadius;

  @media (max-width: $spacer*30) {
    border-radius: 0;
  }

  &--content {
    padding: $spacer $spacer 0 $spacer;

    h4 {
      margin: 0 0 $spacer * 1.5 0;

      &.alert {
        color: $braveRed;
      }
    }

    .modal-buttons {
      margin-top: $spacer * 2;
      text-align: center;

      .btn {
        display: block;
        margin: $spacer 0;

        @include media-breakpoint-up(md) {
          display: inline-block;
          margin: $spacer;
        }
      }
    }
  }

  &--close {
    position: absolute;
    right: 30px;
    top: 30px;
  }
}

.modal-overlay {
  background: rgba(64, 64, 64, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  transition: all 200ms;
  opacity: 0;
  visibility: hidden;
}

.modal-show {
  visibility: visible;

  .modal-panel {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-show ~ .modal-overlay {
  opacity: 1;
  visibility: visible;
}

#main #js-open-modal-on-load {
  display: none;
}
