/**
** RESOURCE GROUPS
** List resource groups with different colors (and icons)
**/

@keyframes fakeLoadingAnimation {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInAdditionals {
  0% {
    opacity: 0;
    transform: translate3d(-10px, 0px, 0px);
  }
  100% {
  }
}

.c-resource-group {
  &:before {
    content: '';
    display: table;
    clear: both;
  }

  &--showall {
    ul {
      animation-name: fakeLoadingAnimation;
      animation-duration: 0.4s;
    }
    .c-topic-resource__item--additional {
      animation-name: fadeInAdditionals;
      animation-duration: 0.4s;
    }
  }

  ul {
    min-height: 123px;
  }

  li {
    background-color: rgba($brand-grey--light, 0.4);
    border: 1px solid rgba(0, 0, 0, 0);
    .c-topic-resource__link {
      min-height: 62px;
      @include mq(tablet) {
        min-height: 68px;
      }
      @include mq(desktop) {
        min-height: 70px;
      }
    }
    .c-topic-resource__icon {
      padding-right: $spacing--small;
      @include mq(tablet) {
        padding-right: $spacing--small;
        padding-left: $spacing--small / 2;
      }
      @include mq(desktop) {
        padding-right: $spacing--small * 1.5;
      }
    }
  }
  .c-topic-resource__body {
    display: flex;
    align-items: center;
    padding-right: 1rem;
  }

  &__header {
    border-bottom: 2px solid $brand-grey--light;
    margin-bottom: $spacing--small / 4;
  }

  &--subject-material {
    li {
      background-color: $subject-material-light;
    }
    .c-topic-resource__item--additional {
      background-color: $subject-material-additional;
      border: 1px dashed rgba($subject-material-dark, 0.4);
    }
  }

  &--tasks-and-activities {
    li {
      background-color: $tasks-and-activities-light;
    }
    .c-topic-resource__item--additional {
      background-color: $tasks-and-activities-additional;
      border: 1px dashed rgba($tasks-and-activities-dark, 0.4);
    }
  }

  &--assessment-resources {
    li {
      background-color: $assessment-resource-light;
    }
    .c-topic-resource__item--additional {
      background-color: $assessment-resource-additional;
      border: 1px dashed $assessment-resource-dark;
    }
  }

  &--learning-path {
    li {
      background-color: $learning-path-background;
    }
    .c-topic-resource__item--additional {
      background-color: $learning-path-background-additional;
      border: 1px dashed rgba($learning-path-dark, 0.4);
    }
  }
}