@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/components.button";

.c-troubleshooting-feedback {
  background-color: $color-stone-200;
  padding: rem(20);
  text-align: center;

  .c-button {
    width: rem(90);

    &:first-of-type {
      margin-right: rem(15);
    }
  }
}

.c-troubleshooting-feedback__content {
  .c-troubleshooting-feedback__text {
    @include font-gm-sans-bold;
    margin: 0 0 rem(15) 0;
    font-size: rem(14);
    color: $color-grey-900;
    letter-spacing: rem(1);
    line-height: line-height(14, 17);
    text-transform: uppercase;
  }

  .c-troubleshooting-feedback__link {
    color: $color-grey-900;
    text-decoration: none;
    border-bottom: 1px solid $color-grey-900;
    &:hover {
      color: $color-red-500;
      border-bottom: 1px solid $color-red-500;
    }
    &:focus, &:active {
      color: $color-red-bright;
      border-bottom: 1px solid $color-red-bright;
    }
  }
}
