@import '~styles/tools/animations';
@import '~styles/tools/mixins';
@import '~styles/base/colors';
@import '~styles/base/media-queries';
@import '~styles/base/type';

$headerHeight: 55px;

.otModal {
  animation: fadeInUp .3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;

  @include gmq(palm) {
    width: 100%;
    border-radius: 0 !important;
    min-height: 100vh;
  }

  @include gmq(lap) {
    animation: fadeInUpCenter .2s;
  }
}

.modalHeader {
  color: $white;

  @include gmq(palm) {
    border-radius: 0 !important;
  }
}

.modalClose {
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  height: 100%;

  i {
    color: $white;
    @include center();
  }
}

.modalBody {
  h6 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .5rem;
  }

  p {
    line-height: 1.5;
  }

  @include gmq(palm) {
    max-height: calc(100vh - #{$headerHeight});
  }
}

.headerText {
  font-weight: font-weight(medium);
  letter-spacing: letter-spacing(medium);
  font-size: font-size(body, small);
  text-transform: uppercase;
  text-align: left;
}