@import '../../../../styles/vars';

%modalButton {
  width: 11.5rem;
}

.modal {
  > div > div {
    border-radius: 0;
    max-width: unset;
    min-width: 45vw;
  }

  &Actions {
    margin-bottom: 3vh;
    margin-right: 5vw;
    padding-right: 1.5rem;
  }

  &Body {
    margin: 0 5vw;
    overflow: hidden;

    &Small {
      max-height: 10rem;
    }
  }

  &Button {
    &Cancel {
      @extend %modalButton;
      background-color: $white;
      border-width: 2px;

      > span {
        color: $skyBlue100;
      }
    }

    &Ok {
      @extend %modalButton;
      margin-left: 1%;
    }
  }
}

.title {
  align-content: center;
  color: $logoBlue;
  display: flex;
  font-size: 1.1rem;
  font-weight: bolder;
  margin-left: 5vw;
  margin-right: 5vw;
  padding-top: 3vw;

  &Icon {
    box-sizing: content-box;
    padding-bottom: 0.6rem;
    padding-right: 0.8rem;

    &CheckCircle {
      color: $green100;
    }

    &Offset {
      margin-left: calc(5vw - 2.5rem);
    }
  }
}