// sass-lint:disable no-qualifying-elements force-element-nesting force-pseudo-nesting placeholder-in-extend max-line-length
button.vl-vi {
  border: 0;
  appearance: none;
  padding: 0;
  outline: none;
}

a.vl-vi {
  text-decoration: none;
}

.vl-vi {
  // accessibility
  &.vl-vi-u-hidden-text {
    font-size: 0;
  }

  // sizes
  &.vl-vi-u-xs::before {
    font-size: 0.8rem;
  }

  &.vl-vi-u-s::before {
    font-size: 1.3rem;
  }

  &.vl-vi-u-m::before {
    font-size: 1.7rem;
  }

  &.vl-vi-u-l::before {
    font-size: 2rem;
  }

  &.vl-vi-u-xl::before {
    font-size: 2.2rem;
  }

  // rotations
  &.vl-vi-u-90deg::before {
    display: inline-block;
    transform: rotate(90deg);
  }

  // rotations
  &.vl-vi-u-180deg::before {
    display: inline-block;
    transform: rotate(180deg);
  }

  // link with icon in front
  &.vl-vi-u-link::before {
    display: inline-block;
    margin-right: 1rem;
    color: $vl-black;
    font-size: 1.3rem;
    text-decoration: none;
  }

  // colors
  &.vl-vi-u-color-grey {
    color: $vl-ghost;
  }

  // badges
  &.vl-vi-u-badge {
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;

    // place the icon in the middle
    &::before {
      margin: 0;
      vertical-align: middle;
      display: block;
    }

    &--link {
      margin-right: 1rem;
    }

    &--link-after {
      margin-left: 1rem;
    }
  }

  @each $vl-name, $vl-colors in $vl-badge-colors {
    &.vl-vi-u-badge--#{$vl-name} {
      background-color: map-get($vl-colors, bg);
      color: map-get($vl-colors, fg);

      &:hover,
      &:focus,
      a:hover &,
      a:focus & {
        background-color: map-get($vl-colors, hoverbg);
        color: map-get($vl-colors, hoverfg);
      }
    }
  }

  @each $vl-name, $vl-sizes in $vl-badge-sizes {
    &.vl-vi-u-badge--#{$vl-name} {
      width: map-get($vl-sizes, size);
      height: map-get($vl-sizes, size);
      line-height:  map-get($vl-sizes, size);

      &::before {
        font-size: map-get($vl-sizes, font);
      }

      @include respond-to(small) {
        width: map-get($vl-sizes, respsize);
        height: map-get($vl-sizes, respsize);
        line-height: map-get($vl-sizes, respsize);

        &::before {
          font-size: map-get($vl-sizes, respfont);
        }
      }
    }
  }
}