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

@include themed {
  .icon-btn {
    &.panel-btn {
      color: get-color(icon);

      &:disabled {
        color: get-color(icon-disabled);
      }
    }

    &.tool-btn {
      color: get-color(icon);

      &:disabled {
        color: get-color(icon-disabled);
      }

      &.active {
        background-color: get-color(primary) !important;
      }

      &:not(:disabled):hover {
        background-color: get-color(bg_layout);
      }
    }
  }

  .icon {
    @extend %icon;

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

  .mask {
    @extend %icon;

    color: inherit;
    background-color: currentcolor;

    &.primary {
      color: get-color(icon-brand);
    }

    @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;
}