@import "./mixins";

.modal-backdrop {
  background-color: $color-white;

  &.in {
    opacity: 0.85;
  }
  
}


.modal-content {
  @include shadow-base;
  background: $winter-sky;
  border: 1px solid $input-borders;
}

.modal-header {
  background-color: $color-white;
  border-bottom: 1px solid $input-borders;
  border-top-left-radius: $border-radius-large;
  border-top-right-radius: $border-radius-large;
  padding: $margin-horizontal * 4 $margin-horizontal * 4;

  .close {
    position: absolute;
    right: $margin-vertical * 3;
    top: $margin-horizontal * 3;
  }

  .modal-title {
    font-size: $font-size-h1;
    font-weight: 600;
    text-align: center;
  }

  .modal-subtitle {
    font-size: $font-size-h2;
    font-weight: 300;
    margin-top: 15px;
  }
}

.modal-body {
  padding: $margin-horizontal * 3 $margin-horizontal * 4;
  text-align: left;

  .modal-description-title {
    color: $color-gray-1000;
    font-size: $font-size-h3;
    font-weight: 400;
    text-align: center;
  }

  .modal-description {
    color: $color-gray-1000;
    font-size: $font-size-h3;
    font-weight: 300;
    text-align: center;

    a {
      color: $color-feel-good-blue;
    }
  }

  .modal-body-section {
    margin-bottom: 0;

    &:last-child {
      margin-bottom: 0;
    }

    .modal-body-section-title {
      font-size: 14px;
      font-weight: 400;
      margin: 0 0 15px;
      text-transform: uppercase;
    }
  }
}

.modal-footer {
  border-top: none;
  padding-bottom: $margin-horizontal * 4;
  padding-top: 0;
  text-align: right;
}

.modal-footer-info {
  color: $color-gray-1000;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
}