//-------------------------------------------------------------------
// Icons
//-------------------------------------------------------------------

// Icon Base Settings
// -------------------------------------------------------------------

// Used to apply icon glyphs through CSS
@mixin icon($name) {
  @if index($icon-list, $name) {
    mask: url('~@/assets/icons/#{$name}.svg') no-repeat 50% 50%;
  } @else {
    @warn error-message($name, $icon-list, 'tokens/_icons.scss');
  }

  @include show-icon-guides;
  @include transition;
}

// Used for positioning inline SVG icons
@mixin icon-inline {
  @include show-icon-guides;

  position: relative;

  svg {
    @include absolute;
    @include transition;

    height: 100%;
    width: 100%;

    path {
      @include transition;
    }
  }
}

// Icon Layout Guides
// -------------------------------------------------------------------

// Set to True to show guidelines
$show-icon-guides: false;

@mixin show-icon-guides {
  @if $show-icon-guides {
    position: relative;

    &::after {
      content: '';
      @include absolute;
      @include bg(contain);

      background-image: url('library-icon-guide.svg');
      z-index: $z-under;
    }
  }
}

@mixin icon-size($size) {
  $type: type-of($size);
  @if $type == 'number' {
    min-width: strip-units($size) * 1%;
    @include aspect-ratio(1, 1);
  } @else if map-has-key($icon-sizes, $size) {
    min-width: map-get($icon-sizes, $size);
    min-height: map-get($icon-sizes, $size);
  } @else {
    @warn error-message($size, $icon-sizes, 'tokens/_icons.scss');
  }
}