@import './themes';

@mixin getIcon($name, $color) {
  --icon-size: 12px;
  content: '';
  display: inline-block;
  mask-image: var($name);
  mask-repeat: no-repeat;
  mask-size: contain;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: $color;
  background-size: 25px;
  margin: 0 6px -1px 0;
}

@mixin plusIcon($color) {
  @include getIcon(--o3-icon-plus, $color);
}

@mixin tickIcon($color) {
  @include getIcon(--o3-icon-tick, $color);
}

@mixin myftToggleIcon($theme: standard) {
  @include withTheme($theme) {
    &::before {
      @include getIcon(--o3-icon-plus, getThemeColor(background));
    }

    &[aria-pressed='true'] {
      &::before {
        @include getIcon(--o3-icon-tick, getThemeColor(text));
      }
    }

    &[disabled],
    &[disabled]:hover {
      background: transparent;

      &::before {
        @include getIcon(--o3-icon-plus, getThemeColor(disabled));
      }

      &[aria-pressed='true']::before {
        @include getIcon(--o3-icon-tick, getThemeColor(disabled));
      }
    }
  }
}