/**
** TOPIC RESOURCE LIST
** List items inside a resource group
**/

.c-topic-resource {
  @include mq($from: desktop) {
    @include grids-expand(4,6,2);
    margin-top: $spacing--large;
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    @include mq($from: tablet) {
      flex-direction: row;
    }
  }

  &__body {
    flex: 1 1 auto;
    text-align: left;
    .c-icon {
      flex-shrink: 0;
    }
  }

  &__item {
    max-width: 100%;
    margin-bottom: $spacing--small / 4;
  }

  &__link {
    display: flex;
    color: $brand-color--dark;
    align-items: center;
    width: auto;

    h1 {
      transform: translateY(-1px);
      @include font-size(16px, 26px);
      @include mq(tablet) {
        @include font-size(18px);
      }
      @include mq(desktop) {
        @include font-size(20px);
      }
    }
    h1 span {
      box-shadow: $link;
    }

    padding: $spacing--small;
    box-shadow: none;

    &:hover,
    &:focus {
      box-shadow: none;

      h1 span {
        box-shadow: $link--hover;
      }
    }
  }

  &__item--hidden {
    opacity: 0;
    display: none;
  }

  &__icon {
    display: flex;
    text-align: center;
    width: auto;
    padding-right: $spacing--small;
    @include mq(tablet) {
      padding-right: $spacing;
    }
  }

  &__title {
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    display: inline;
    @include font-size(18px);
    @include mq(tablet) {
      @include font-size(20px);
    }
  }

  &__button-wrapper {
    text-align: center;
  }

  &__button {
    margin: $spacing--small auto;
  }

  &__additional-resources-trigger {
    background: $brand-grey--lightest;
    border: 1px dashed $brand-color--light;
    text-align: center;
    padding: $spacing--small $spacing--small $spacing;
    font-family: $font;
    p {
      @include font-size(16px, 18px);
      margin: $spacing--small;
    }
  }
}

.c-topic-resource__list__additional-icons {
  line-height: 0;
}