@mixin icon-link-color(
  $color: $color-blue,
  $hover-color: $color-aqua-lightest
) {
  color: $color;

  &:hover {
    background-color: $hover-color;
    color: $color;
  }

  .icon {
    @include icon-color($color);
  }
}

@mixin icon-link {
  @include icon-link-color($color-primary);
  @include h5;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: $gap;
  text-decoration: none;
  background: none;
  transition: background-color $hover-transition-time;
  border-radius: $gap / 2;
  cursor: pointer;

  .icon {
    @include icon-color($color-primary);
    @include icon-size(16);

    margin-right: $gap;

    &--help {
      position: relative;
      bottom: -3px;
    }

    &--info {
      position: relative;
      bottom: 3px;
    }
  }
}

@mixin icon-link-large {
  @include h4;

  font-weight: $font-normal;
}

@mixin icon-link-vertical {
  flex-direction: column;

  .icon {
    margin: 0 $gap $gap;
  }
}

.icon-link {
  @include icon-link;
  @include icon-link-color($color-primary);

  text-decoration: underline;

  &--vertical {
    @include icon-link-vertical;
  }

  &--large {
    @include icon-link-large;
  }

  &--danger {
    @include icon-link-color($color-red, $color-red-lightest);
  }

  &--default {
    @include icon-link-color($color-black-light, $color-gray-lightest);
  }

  &--download {
    @include icon-link-color($color-black);
    font-weight: $font-normal;
    padding-left: 0;

    .icon {
      @include icon-color($color-green);
    }
  }

  &--disabled {
    opacity: 0.3;
    text-decoration: none;
    pointer-events: none;

    &:hover {
      cursor: default;
      background: inherit;
    }
  }

  &--left {
    padding-left: 0;
  }
}