.dependency-list {
  margin-top: $spacing-unit;
  width: auto;

  &__dependency {
    color: $foreground;
    display: flex;
    opacity: 0.5;
    transition: opacity 0.25s;
    white-space: nowrap;

    &__icon {
      fill: $green;
      flex: 0 0 $spacing-unit * 2/5;
      height: $spacing-unit * 2/5;
      margin-right: $spacing-unit * 1/5;
      opacity: 0;
      transition: opacity 0.25s;
      width: $spacing-unit * 2/5;

      .icon {
        height: 10px;
        width: 10px;
      }
    }

    &--satisfied {
      opacity: 1;

      .dependency-list {
        &__dependency {
          &__icon {
            opacity: 1;
          }
        }
      }
    }
  }
}
