.issues {
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18);

  @include max-width-bp(medium) {
    box-shadow: none;
  }

  margin-bottom: 1.5rem;

  @include bp(medium) {
    margin-bottom: 0;
  }

  &__header {
    text-align: center;
    background-color: #fff;

    h2,
    h3 {
      margin: 0;
      padding: 12px;
      text-align: center;
      background-color: $gray-xlight;
    }
    h2 {
      font-size: 20px;
    }
  }

  &__title {
    font-size: $font-xxlarge;
    line-height: 1;
    font-weight: bold;
    font-style: italic;
    margin: 0;
    padding: 12px 12px 0;
    a {
      text-decoration: none;
      font-size: 0.1px;
    }
  }

  &__logo {
    width: 200px;
  }

  &__footer-link {
    display: block;
    text-align: center;
    background-color: $gray-xlight;
    border-bottom: 1px solid $gray-light;
    color: $blue;
    padding: 10px;
    &:hover {
      background-color: $white;
    }
  }
}

.issues-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: $gray-xlight;
  border-bottom: 1px solid $gray-light;

  &__item {
    display: block;
    position: relative;
    border-top: 1px solid $gray-light;
    padding: 3px 12px 3px 48px;
    margin: 0;
    color: $blue;
    &:hover,
    &:focus {
      text-decoration: none;
      color: $color-text;
      background-color: lighten($gray-xlight, 2%);
    }

    &__status {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 12px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      font-size: 21px;
      line-height: 36px;
      text-align: center;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      color: $white;

      & circle {
        fill: transparent;
        stroke-width: 4;
        stroke: $gray-lesslight;

        &.progress {
          stroke: $green;
        }
      }

      &.is-complete {
        color: transparent;
        border: 3px solid $green;
        background-color: $green;
        background-image: url(/img/5calls-icon-checkmark.png);
        background-size: 26px auto;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    &__title {
      display: block;
      font-size: $font-normal;
      margin: 12px;
      font-family: $font-headings;
      line-height: 1.3;
    }

    &__summary {
      display: block;
      font-size: 0.9rem;
      text-align: right;
      display: none;
    }

    img {
      position: absolute;
      top: 20px;
      right: -35px;
    }

    &.is-active {
      background-color: $white;
      color: $color-text;
    }

    &:hover {
      cursor: pointer;
    }
  }
}
