@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-troubleshooting-diagnostic {
  padding: rem(20) rem(10);
  text-align: center;
}

.c-troubleshooting-diagnostic__icon {
  width: rem(208);
  height: rem(123);
  margin-bottom: rem(10);
}

.c-troubleshooting-diagnostic__icon__use {
  fill: $color-grey-300;
  color: #ddd;
}

.c-troubleshooting-diagnostic__content {
  hr {
    border: none;
    height: rem(1);
    background-color: $color-stone-300;
    overflow: hidden;
  }
}

.c-troubleshooting-diagnostic__title {
  @include font-pratt;
  font-size: rem(36);
  line-height: line-height(36, 39);
  letter-spacing: 0;
  color: $color-grey-900;
  margin: 0;
}

.c-troubleshooting-diagnostic__text,
.c-troubleshooting-diagnostic__message {
  @include font-pratt;
  font-size: rem(17);
  line-height: line-height(17, 20);
  letter-spacing: 0;
  color: $color-grey-900;
  margin: rem(12) 0 rem(20);
}

.c-troubleshooting-diagnostic__message {
  @include font-pratt-bold;
  margin: rem(20) 0;
}

.c-troubleshooting-diagnostic .c-accordion__item--open {
  .c-button__icon--warning {
    transform: none;
  }
}

.c-troubleshooting-diagnostic__system-info {
  margin: rem(20) auto 0;
  padding: rem(10) rem(10) rem(20);
  background-color: $color-stone-150;
}

.c-troubleshooting-diagnostic__system-info__link {
  color: $color-grey-900;
  &:visited {
    color: $color-grey-900;
  }

  &:hover, &:focus {
    color: $color-red-500;
  }

  &:active {
    color: $color-red-bright;
  }
}

.c-troubleshooting-diagnostic__system-info__title {
  @include font-gm-sans-bold;
  font-size: rem(16);
  color: $color-grey-900;
  letter-spacing: rem(1);
  line-height: line-height(16, 16);
  text-transform: uppercase;
}

.c-troubleshooting-diagnostic__system-info__details {
  @include font-gm-sans;
  font-size: rem(16);
  letter-spacing: rem(0.5);
  line-height: line-height(16, 19);
  color: $color-grey-800;
}

.c-troubleshooting-diagnostic__system-info__text {
  @include font-pratt;
  color: $color-grey-900;
  font-size: rem(16);
  line-height: line-height(16, 22);
  margin: rem(20) auto rem(15);

}

// Light theme overrides
.c-troubleshooting-diagnostic .c-accordion--light {
  .c-button__icon.c-button__icon--issue {
    fill: $color-utility-yellow-900;
    width: rem(20);
    height: rem(20);
    margin-right: rem(5);
  }

  .c-button__icon.c-button__icon--error {
    fill: $color-utility-red-500;
    width: rem(20);
    height: rem(20);
    margin-right: rem(5);
  }
}

// Pass
.c-troubleshooting-diagnostic--pass {
  text-align: left;

  .c-troubleshooting-diagnostic__title {
    @include font-gm-sans-bold;
    font-size: rem(24);
    line-height: line-height(24, 27);
    color: $color-utility-green-500;
  }

  .c-troubleshooting-diagnostic__text {
    margin: rem(20) 0 0;
  }

  .c-troubleshooting-diagnostic__login {
    text-align: center;
    margin-top: rem(30);
  }
}

// Issues Detected
.c-troubleshooting-diagnostic--issues {
  text-align: left;

  .c-troubleshooting-diagnostic__title {
    @include font-gm-sans-bold;
    font-size: rem(24);
    line-height: line-height(24, 27);
    color: $color-grey-900;
    text-transform: uppercase;
  }

  .c-troubleshooting-diagnostic__text {
    margin: rem(20) 0 0;
  }

  .c-troubleshooting-diagnostic__issues-detected {
    margin-top: rem(30);
  }

  .c-button--full-width {
    &:hover,
    &:focus {
      .c-button__icon--issue {
        fill: $color-utility-yellow-900;
      }
      .c-button__icon--error {
        fill: $color-utility-red-500;
      }
    }
  }

  .c-accordion__item .c-button__text {
    @include display-grid;
    @include grid-template-columns(rem(5), auto 1fr);

    .c-button__icon--warning {
      @include grid-column(1, 2, true);
      @include grid-row(1, 2);
      @include grid-align-self(center);
    }
    .c-button__text-content {
      @include grid-column(2, 3, true);
      @include grid-row(1, 2);
      @include grid-align-self(center);
    }
  }
}

// Fail State
.c-troubleshooting-diagnostic--fail {
  .c-troubleshooting-diagnostic__title,
  .c-accordion__item--error .c-button {
    color: $color-utility-red-500;
  }
}
