@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .modal-positioner {
    z-index: 1001;

    @media (max-width: 1000px) {
      width: 100%;
    }
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(#F8F6F0, 0.87);
    z-index: 999;

    @media (max-width: 1000px) {
      background: #F8F6F0;
    }
  }

  .modal-title {
    font-size: 28px;
    line-height: 1em;
    margin-top: -($baseUnit * 3);
    margin-bottom: $baseUnit * 3;
    padding: 0 ($baseUnit * 2.5);
    display: flex;
    align-items: center;

    @media (max-width: 1000px) {
      height: 75px;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 21px;
    }

    .modal-close-button {
      @include reset-button();
      margin-right: $baseUnit * 2;
      outline: 0;
      margin-top: -2px;

      @media (max-width: 1000px) {
        svg {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .modal-content {
    display: flex;
    width: 82vw;
    max-width: 1400px;
    z-index: 102;
    padding: ($baseUnit * 9) ($baseUnit * 6) ($baseUnit * 9) 0;
    background: #fff;
    box-shadow: 0 20px 13px 0 rgba(0, 0, 0, 0.04);
    height: 80vh;

    @media (max-width: 1000px) {
      display: block;
      width: 100%;
      height: calc(100vh - 75px);
      max-width: 100%;
      padding: $baseUnit * 2;
      overflow-y: auto;
    }
  }
}

.modal-body {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  padding-right: $baseUnit * 8;
  padding-left: $baseUnit * 6;

  @media (max-width: 1000px) {
    padding: 0;
    overflow-y: auto;
  }
}

.modal-side-actions {
  padding: ($baseUnit * 8) 0 ($baseUnit * 8) ($baseUnit * 4);
  border-left: 1px solid #979797;
  display: flex;
  align-items: flex-end;

  @media (max-width: 1000px) {
    padding: 0;
    padding-bottom: $baseUnit * 5;
    border: 0;
    justify-content: center;
  }

  .action {
    display: block;
    width: 100%;
    margin-top: $baseUnit * 3;
    text-align: center;

    .link {
      color: $deepSeaGreen;
      font-weight: 700;
    }
  }
}