@import '../core/mixins.scss';
@import "../colors/colors";

.fx-modal {
  position: relative;

  &.feedback-modal {
    text-align: center;
    min-height: 400px;
    .active {
      figure {
        opacity: 1;
        height: 300px;
        &.has-btn {
          height: 400px;
        }
      }
    }
    figure {
      opacity: 0;
      height: 0;
      @include transition(opacity .4s);
    }
    img, object {
      width: 300px;
      margin: auto;
      display: block;
    }
    figcaption {
      font-size: 18px;
      color: $primary-color;
      p {
        color: $gray-50;
      }
    }
    &.feedback-success {
      figure {
        opacity: 1;
        height: 310px;
        object {
          width: 140px;
          margin: 30px auto;
        }
      }
    }
    &.feedback-denied {
      padding: 0;
      h1 {
        font-size: 30px;
        color: #cc9911;
        margin-bottom: 14px;
      }
      a {
        margin-bottom: 44px;
        margin-top: 6px;
        font-size: 16px;
      }
      button {
        margin-right: 16px !important;
      }
      .fx-modal-body {
        margin: 15px 30px 50px;
      }
      .rm-link {
        position: absolute;
        top: -5px;
        right: 0;
        color: $gray-20;

        &:hover {
          color: lighten($gray-20, 5%);
        }
      }
    }
  }
}