@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(12);
    margin-right: $gap;
  }
}

@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;

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

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

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

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

  &.icon-link--disabled {
    opacity: 0.3;
    pointer-events: none;
    text-decoration: none;
  }

  &.icon-link--left {
    padding-left: 0;
  }
}