// ============================================================================
// :: Feedback
// ============================================================================
/**
 * Component used to provide feedback to the user. This feedback is based upon
 * states like is-success to give the correct context to the user.
 */

// ============================================================================
// :: Settings
// ============================================================================
$icon-size: 10.4rem;

// ============================================================================
// :: Root
// ============================================================================
.m-feedback {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 2rem 3rem;

  @include respond-at($breakpoint-tablet-default) {
    padding: 7rem 3rem 4.5rem;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.m-feedback__content {
  text-align: center;
}

.m-feedback__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: $icon-size;
  height: $icon-size;
  min-width: $icon-size;
  min-height: $icon-size;

  border-radius: $border-radius-round;
  background-color: $background-color-white;

  // Style the icon
  &::before {
    font-size: $icon-size-4x-large;
  }
}

.m-feedback__title,
.m-feedback__text {
  color: $text-color-white;
}

.m-feedback__title {
  margin-bottom: 1.5rem;
  margin-top: 8rem;

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

  @include respond-at($breakpoint-tablet-default) {
    margin-top: 5rem;
  }
}

.m-feedback__text {
  font-size: $font-size-base;
  line-height: $line-height-base;

  a {
    color: $text-color-white;
  }
}

.m-feedback__button {
  margin-top: 3rem;

  color: $text-color-white;
  border-color: rgba($white, 0.5);

  &:hover {
    border-color: $white;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-feedback {
  &.is-success {
    background-color: $ui-success;

    .m-feedback__icon {
      // only add an icon if we haven't specified one in our component
      &:not([class*="icon-"]) {
        @extend %__icon-checkmark;
      }

      // Style the icon
      &::before {
        color: $ui-success;
      }
    }
  }

  &.is-error {
    background: $secondary-color-base;

    .m-feedback__icon {
      // only add an icon if we haven't specified one in our component
      &:not([class*="icon-"]) {
        @extend %__icon-warning;
      }

      background-color: transparent;

      // Style the icon
      &::before {
        color: $white;
      }
    }
  }

  &.is-warning {
    background: $primary-color-base;

    .m-feedback__icon {
      // only add an icon if we haven't specified one in our component
      &:not([class*="icon-"]) {
        @extend %__icon-info;
      }

      background-color: transparent;

      // Style the icon
      &::before {
        color: $white;
      }
    }
  }
}