@use 'sass:math';

@use '../tools/colors';
@use '../tools/variables';

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

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

    &__icon {
      fill: colors.$green;
      flex: 0 0 math.div(variables.$spacing-unit * 2, 5);
      height: math.div(variables.$spacing-unit * 2, 5);
      margin-right: math.div(variables.$spacing-unit * 1, 5);
      opacity: 0;
      transition: opacity 0.25s;
      width: math.div(variables.$spacing-unit * 2, 5);

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

    &--satisfied {
      opacity: 1;

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