@use "system/icon-map";
@use "system/spacing";
@use "system/colors";
@use "system/states";
@use "sass:map";

@mixin icon-right($icon, $size: 0.6em) {
  &::after,
  &:hover::after {
    font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
    font-size: $size;
    content: map.get(icon-map.$icons, $icon) !important;
    display: inline-block;
    margin-left: 0.4em;
  }
}

@mixin icon-left($icon) {
  text-decoration: none;
  position: relative;
  padding-left: 0.9em;
  margin-left: 6px;

  &:hover {
    text-decoration: underline;
  }

  &::before,
  &:hover::before {
    font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
    font-size: 1em;
    content: map.get(icon-map.$icons, $icon) !important;
    display: inline-block;
    position: absolute;
    left: -6px;
    top: -0.06em;
  }
}

@mixin states {
  &:visited,
  &--visited {
    color: states.$visited !important;
    @content;
  }

  &:hover,
  &--hover,
  &:focus,
  &--focus {
    color: states.$hover !important;
    @content;
  }

  &:active,
  &--active {
    color: states.$active !important;
    @content;
  }
}