@use 'sass:map';
@use '../../global/scss/tools' as nsw;

// $nsw-icon-sizes: (
//   20: 20px,
//   24: 24px,
//   30: 30px,
//   36: 36px
// );

// $nsw-icon-colors: (
//   brand: var(--nsw-brand-dark),
//   accent: var(--nsw-brand-accent),
//   error: var(--nsw-status-error),
//   success: var(--nsw-status-success),
//   info: var(--nsw-status-info),
//   warning: var(--nsw-status-warning)
// );

// $nsw-icon-angles: (90, 180, 270);

.nsw-material-icons {
  @each $size, $variant in nsw.$nsw-icon-sizes {
    &--#{"" + $size} {
      font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, $size));
    }
  }

  @each $color, $variant in nsw.$nsw-icon-colors {
    &--#{"" + $color} {
      /* stylelint-disable-next-line sh-waqar/declaration-use-variable */
      color: map.get(nsw.$nsw-icon-colors, $color);
    }
  }

  @each $angle, $variant in nsw.$nsw-icon-angles {
    &--rotate-#{"" + $angle} {
      transform: rotate(#{$angle}deg);
    }
  }

  &--inline {
    font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 20));
    line-height: nsw.rem(10px);
    position: relative;
    bottom: nsw.rem(-5px);
    margin-right: nsw.rem(4px);
  }
}

.nsw-icon-button {
  background: none;
  text-decoration: none;
  padding: nsw.rem(8px);
  display: inline-block;
  border: 0;
  color: var(--nsw-brand-dark);
  font-weight: var(--nsw-font-bold);
  border-radius: var(--nsw-border-radius);
  
  @include nsw.font-size('sm');

  &:hover {
    @include nsw.nsw-hover;
    outline-width: 0;
  }

  &:focus {
    @include nsw.nsw-focus($offset: false);
  }

  .nsw-material-icons,
  svg {
    display: block;
  }

  @at-root {
    a#{&} {
      cursor: pointer;
    }
  }

  &--flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nsw-section--invert & {    
    @include nsw.link-light;
  }
}