@use 'asset/themes/theme' as *;
@use 'asset/icons/icon' as *;

@include themed {
  i {
    &.bg-1 {
      background-color: get-color(ffffffd9);
    }
  }

  .icon {
    @extend %icon;

    @each $icon in $icons {
      &.#{$icon} {
        background: get-icon($icon);
      }
    }
  }

  .mask {
    @extend %icon;

    @each $icon in $icons {
      &.#{$icon} {
        mask: get-icon($icon);
      }
    }
  }
}

%icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 24px;
  line-height: 1;
  vertical-align: top;
}