$button-content: '.button-core__content';

.icon-button {
  width: var(--wds-button-size-medium, var(--wds-space-600, 36px));
  height: var(--wds-button-size-medium, var(--wds-space-600, 36px));
  border-radius: var(
    --wds-button-border-radius-medium,
    var(--wds-border-radius-full, 50%)
  );
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-property: background-color, color, border-color;
  background-color: var(
    --wds-icon-button-color-fill-standard-primary,
    var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
  );
  border-color: var(
    --wds-icon-button-color-fill-standard-primary,
    var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
  );
  color: var(
    --wds-icon-button-color-text-standard-primary,
    var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
  );

  &:not(&--disabled):focus-visible {
    outline-offset: 1px;
  }

  &:not(&--disabled):focus-visible::before {
    inset: -1px;
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(
        --wds-icon-button-color-fill-standard-primary-hover,
        var(
          --wds-color-fill-standard-primary-hover,
          var(--wsr-color-B05, #0f62e6)
        )
      );
      border-color: var(
        --wds-icon-button-color-fill-standard-primary-hover,
        var(
          --wds-color-fill-standard-primary-hover,
          var(--wsr-color-B05, #0f62e6)
        )
      );
      color: var(
        --wds-icon-button-color-text-standard-primary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &:active {
    background-color: var(
      --wds-icon-button-color-fill-standard-primary-active,
      var(
        --wds-color-fill-standard-primary-active,
        var(--wsr-color-B00, #084ebd)
      )
    );
    border-color: var(
      --wds-icon-button-color-fill-standard-primary-active,
      var(
        --wds-color-fill-standard-primary-active,
        var(--wsr-color-B00, #084ebd)
      )
    );
    color: var(
      --wds-icon-button-color-text-standard-primary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-standard-primary-disabled,
      var(
        --wds-color-fill-standard-primary-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-standard-primary-disabled,
      var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff))
    );
  }

  & #{$button-content} {
    line-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &#{&}--priority-secondary {
    background: var(
      --wds-icon-button-color-fill-standard-secondary,
      var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-standard-secondary,
        var(
          --wds-color-border-standard-secondary,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
    color: var(
      --wds-icon-button-color-text-standard-secondary,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  @media (hover: hover) {
    &#{&}--priority-secondary:hover,
    &#{&}--skin-inverted:hover,
    &#{&}--skin-inverted#{&}--priority-secondary:hover {
      background-color: var(
        --wds-icon-button-color-fill-standard-secondary-hover,
        var(
          --wds-color-fill-standard-primary-hover,
          var(--wsr-color-B05, #0f62e6)
        )
      );
      border-color: var(
        --wds-icon-button-color-border-standard-secondary-hover,
        var(
          --wds-color-border-standard-secondary-hover,
          var(--wsr-color-B05, #0f62e6)
        )
      );
      color: var(
        --wds-icon-button-color-text-standard-secondary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &#{&}--priority-secondary:active,
  &#{&}--skin-inverted:active,
  &#{&}--skin-inverted#{&}--priority-secondary:active {
    background-color: var(
      --wds-icon-button-color-fill-standard-secondary-active,
      var(
        --wds-color-fill-standard-primary-active,
        var(--wsr-color-B00, #084ebd)
      )
    );
    border-color: var(
      --wds-icon-button-color-border-standard-secondary-active,
      var(
        --wds-color-border-standard-secondary-active,
        var(--wsr-color-B00, #084ebd)
      )
    );
    color: var(
      --wds-icon-button-color-text-standard-secondary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-standard-secondary-disabled,
      var(
        --wds-color-fill-standard-tertiary-disabled,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border-color: var(
      --wds-icon-button-color-border-standard-secondary-disabled,
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
      )
    );
    color: var(
      --wds-icon-button-color-text-standard-secondary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--priority-tertiary {
    background: var(
      --wds-icon-button-color-fill-standard-tertiary,
      var(--wds-color-fill-light-secondary, var(--wsr-color-D80, #ffffff))
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-standard-tertiary,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  @media (hover: hover) {
    &#{&}--priority-tertiary:hover {
      background: var(
        --wds-icon-button-color-fill-standard-tertiary-hover,
        var(
          --wds-color-fill-light-secondary-hover,
          var(--wsr-color-D80, #ffffff)
        )
      );
      border-color: transparent;
      color: var(
        --wds-icon-button-color-text-standard-tertiary-hover,
        var(--wds-color-text-primary, var(--wsr-color-B05, #0f62e6))
      );
    }
  }

  &#{&}--priority-tertiary:active {
    background: var(
      --wds-icon-button-color-fill-standard-tertiary-active,
      var(
        --wds-color-fill-light-secondary-active,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-standard-tertiary-active,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}--priority-tertiary#{&}--disabled {
    background: var(
      --wds-icon-button-color-fill-standard-tertiary-disabled,
      var(
        --wds-color-fill-light-secondary-disabled,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-standard-tertiary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--skin-inverted {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-standard-secondary,
        var(
          --wds-color-border-standard-secondary,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
    color: var(
      --wds-icon-button-color-text-standard-secondary,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}--skin-inverted#{&}--disabled,
  &#{&}--skin-inverted#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80, #ffffff)
    );
    border-color: var(
      --wds-color-border-standard-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-inverted#{&}--priority-secondary {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-standard-secondary,
        var(
          --wds-color-border-standard-secondary,
          var(--wsr-color-B40, #d6e6fe)
        )
      );
    color: var(
      --wds-icon-button-color-text-standard-secondary,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}--skin-light {
    background-color: var(
      --wds-icon-button-color-fill-light-primary,
      var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff))
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-light-primary,
      var(--wds-color-text-primary, var(--wsr-color-B20, #5999ff))
    );
  }

  @media (hover: hover) {
    &#{&}--skin-light:hover {
      background-color: var(
        --wds-icon-button-color-fill-light-primary-hover,
        var(--wds-color-fill-light-primary-hover, var(--wsr-color-B50, #e7f0ff))
      );
      color: var(
        --wds-icon-button-color-text-light-primary-hover,
        var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
      );
      border-color: var(
        --wds-icon-button-color-fill-light-primary-hover,
        var(--wds-color-fill-light-primary-hover, var(--wsr-color-B50, #e7f0ff))
      );
    }
  }

  &#{&}--skin-light:active {
    background-color: var(
      --wds-icon-button-color-fill-light-primary-active,
      var(--wds-color-fill-light-primary-active, var(--wsr-color-B40, #d6e6fe))
    );
    color: var(
      --wds-icon-button-color-text-light-primary-active,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}--skin-light#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-light-primary-disabled,
      var(
        --wds-color-fill-light-primary-disabled,
        var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-light-primary-disabled,
      var(--wds-color-text-disabled, var(--wsr-color-D80, #ffffff))
    );
  }

  &#{&}--skin-light#{&}--priority-secondary {
    background: var(
      --wds-icon-button-color-fill-light-secondary,
      var(--wds-color-fill-light-secondary, transparent)
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-light-secondary,
        var(
          --wds-color-border-light,
          var(--wsr-color-D80-50, rgba(255, 255, 255, 0.5))
        )
      );
    color: var(
      --wds-icon-button-color-text-light-secondary,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-secondary:hover {
      background-color: var(
        --wds-icon-button-color-fill-light-secondary-hover,
        var(
          --wds-color-fill-light-secondary-hover,
          var(--wsr-color-B50, #e7f0ff)
        )
      );
      border-color: var(
        --wds-icon-button-color-border-light-secondary-hover,
        var(--wds-color-border-light-hover, var(--wsr-color-B50, #e7f0ff))
      );
      color: var(
        --wds-icon-button-color-text-light-secondary-hover,
        var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
      );
    }
  }

  &#{&}--skin-light#{&}--priority-secondary:active {
    background-color: var(
      --wds-icon-button-color-fill-light-secondary-active,
      var(
        --wds-color-fill-light-secondary-active,
        var(--wsr-color-B40, #d6e6fe)
      )
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-light-secondary-active,
        var(--wds-color-border-light-active, var(--wsr-color-B40, #d6e6fe))
      );
    color: var(
      --wds-icon-button-color-text-light-secondary-active,
      var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
    );
  }

  &#{&}--skin-light#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-light-secondary-disabled,
      var(--wds-color-fill-light-secondary-disabled, transparent)
    );
    border-color: var(
      --wds-icon-button-color-border-light-secondary-disabled,
      var(
        --wds-color-border-light-disabled,
        var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
      )
    );
    color: var(
      --wds-icon-button-color-text-light-secondary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
      )
    );
  }

  &#{&}--skin-light#{&}--priority-tertiary {
    background: var(
      --wds-icon-button-color-fill-light-tertiary,
      var(--wds-color-fill-light-secondary, transparent)
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-light-tertiary,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--skin-light#{&}--priority-tertiary:hover {
      background: var(
        --wds-icon-button-color-fill-light-tertiary-hover,
        var(--wds-color-fill-light-secondary-hover, transparent)
      );
      border-color: transparent;
      color: var(
        --wds-icon-button-color-text-light-tertiary-hover,
        var(--wds-color-text-primary, var(--wsr-color-B50, #e7f0ff))
      );
    }
  }

  &#{&}--skin-light#{&}--priority-tertiary:active {
    background: var(
      --wds-icon-button-color-fill-light-tertiary-active,
      var(--wds-color-fill-light-secondary-active, transparent)
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-light-tertiary-active,
      var(--wds-color-text-primary, var(--wsr-color-B40, #d6e6fe))
    );
  }

  &#{&}--skin-light#{&}--priority-tertiary#{&}--disabled {
    background: var(
      --wds-icon-button-color-fill-light-tertiary-disabled,
      var(--wds-color-fill-light-secondary-disabled, transparent)
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-light-tertiary-disabled,
      var(
        --wds-color-text-disabled-light,
        var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
      )
    );
  }

  &#{&}--skin-transparent {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-color-fill-transparent-primary,
      color-mix(in srgb, var(--wsr-color-D20, #333853) 48%, transparent)
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent:hover {
      background-color: var(
        --wds-color-fill-transparent-primary-hover,
        var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
      );
      border-color: transparent;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-transparent:active {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(
      --wds-color-fill-transparent-primary-active,
      color-mix(in srgb, var(--wsr-color-D20, #333853) 72%, transparent)
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-transparent#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-primary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &#{&}--skin-transparent#{&}--priority-secondary {
    background-color: var(--wds-color-fill-transparent-secondary, transparent);
    border-color: var(--wds-color-fill-transparent-secondary, transparent);
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-secondary:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background-color: var(
        --wds-color-fill-transparent-secondary-hover,
        color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
      );
      border-color: transparent;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-transparent#{&}--priority-secondary:active {
    background-color: var(
      --wds-color-fill-transparent-secondary-active,
      var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
    );
    border-color: transparent;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-transparent#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-transparent-secondary-disabled,
      transparent
    );
    border-color: var(
      --wds-color-border-dark-secondary-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
    );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-transparent#{&}--priority-tertiary {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-button-label-fill-transparent-tertiary,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--skin-transparent#{&}--priority-tertiary:hover {
      background-color: var(--wds-color-fill-transparent-tertiary, transparent);
      border-color: transparent;
      /* stylelint-disable-next-line plugin/use-baseline */
      color: var(
        --wds-color-fill-transparent-tertiary-hover,
        color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
      );
    }
  }

  &#{&}--skin-transparent#{&}--priority-tertiary:active {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-color-fill-transparent-tertiary-active,
      var(--wsr-color-D20-60, rgba(51, 56, 83, 0.6))
    );
  }

  &#{&}--skin-transparent#{&}--priority-tertiary#{&}--disabled {
    background-color: var(--wds-color-fill-transparent-tertiary, transparent);
    border-color: transparent;
    color: var(
      --wds-color-fill-transparent-tertiary-disabled,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }

  &#{&}--skin-premium {
    background-color: var(
      --wds-icon-button-color-fill-premium-primary,
      var(--wds-color-fill-premium-primary, var(--wsr-color-P10, #9a27d5))
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-premium-primary,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--skin-premium:hover {
      background-color: var(
        --wds-icon-button-color-fill-premium-primary-hover,
        var(
          --wds-color-fill-premium-primary-hover,
          var(--wsr-color-P05, #8e1dd1)
        )
      );
      border-color: var(
        --wds-icon-button-color-fill-premium-primary-hover,
        var(
          --wds-color-fill-premium-primary-hover,
          var(--wsr-color-P05, #8e1dd1)
        )
      );
      color: var(
        --wds-icon-button-color-text-premium-primary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &#{&}--skin-premium:active {
    background-color: var(
      --wds-icon-button-color-fill-premium-primary-active,
      var(
        --wds-color-fill-premium-primary-active,
        var(--wsr-color-P00, #7416a5)
      )
    );
    border-color: var(
      --wds-icon-button-color-fill-premium-primary-active,
      var(
        --wds-color-fill-premium-primary-active,
        var(--wsr-color-P00, #7416a5)
      )
    );
    color: var(
      --wds-icon-button-color-text-premium-primary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--skin-premium#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-premium-primary-disabled,
      var(
        --wds-color-fill-standard-primary-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-premium-primary-disabled,
      var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff))
    );
  }

  &#{&}--skin-premium#{&}--priority-secondary {
    background-color: var(
      --wds-icon-button-color-fill-premium-secondary,
      var(--wds-color-fill-premium-tertiary, var(--wsr-color-D80, #ffffff))
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-premium-secondary,
        var(--wds-color-border-premium-secondary, var(--wsr-color-P40, #e3c3f4))
      );
    color: var(
      --wds-icon-button-color-text-premium-secondary,
      var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5))
    );
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-secondary:hover {
      background-color: var(
        --wds-icon-button-color-fill-premium-secondary-hover,
        var(
          --wds-color-fill-premium-primary-hover,
          var(--wsr-color-P05, #8e1dd1)
        )
      );
      border-color: var(
        --wds-icon-button-color-fill-premium-secondary-hover,
        var(
          --wds-color-fill-premium-primary-hover,
          var(--wsr-color-P05, #8e1dd1)
        )
      );
      color: var(
        --wds-icon-button-color-text-premium-secondary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &#{&}--skin-premium#{&}--priority-secondary:active {
    background-color: var(
      --wds-icon-button-color-fill-premium-secondary-active,
      var(
        --wds-color-fill-premium-primary-active,
        var(--wsr-color-P00, #7416a5)
      )
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-premium-secondary-active,
        var(
          --wds-color-border-premium-secondary-active,
          var(--wsr-color-P00, #7416a5)
        )
      );
    color: var(
      --wds-icon-button-color-text-premium-secondary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--skin-premium#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-premium-secondary-disabled,
      var(
        --wds-color-fill-premium-tertiary-disabled,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border-color: var(
      --wds-icon-button-color-border-premium-secondary-disabled,
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
      )
    );
    color: var(
      --wds-icon-button-color-text-premium-secondary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--skin-premium#{&}--priority-tertiary {
    background-color: var(
      --wds-icon-button-color-fill-premium-tertiary,
      var(
        --wds-color-fill-premium-light-secondary,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-premium-tertiary,
      var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5))
    );
  }

  @media (hover: hover) {
    &#{&}--skin-premium#{&}--priority-tertiary:hover {
      background-color: var(
        --wds-icon-button-color-fill-premium-tertiary-hover,
        var(
          --wds-color-fill-premium-light-secondary-hover,
          var(--wsr-color-D80, #ffffff)
        )
      );
      border-color: transparent;
      color: var(
        --wds-icon-button-color-text-premium-tertiary-hover,
        var(--wds-color-text-premium, var(--wsr-color-P20, #c161f0))
      );
    }
  }

  &#{&}--skin-premium#{&}--priority-tertiary:active {
    background-color: var(
      --wds-icon-button-color-fill-premium-tertiary-active,
      var(
        --wds-color-fill-premium-light-secondary-active,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-premium-tertiary-active,
      var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5))
    );
  }

  &#{&}--skin-premium#{&}--priority-tertiary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-premium-tertiary-disabled,
      var(
        --wds-color-fill-premium-light-secondary-disabled,
        var(--wsr-color-D80, #ffffff)
      )
    );
    border-color: transparent;
    color: var(
      --wds-icon-button-color-text-premium-tertiary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--skin-dark {
    background-color: var(
      --wds-icon-button-color-fill-dark-primary,
      var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624))
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-primary,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  @media (hover: hover) {
    &#{&}--skin-dark:hover {
      background-color: var(
        --wds-icon-button-color-fill-dark-primary-hover,
        var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853))
      );
      border: none;
      color: var(
        --wds-icon-button-color-text-dark-primary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &#{&}--skin-dark:active {
    background-color: var(
      --wds-icon-button-color-fill-dark-primary-active,
      var(--wds-color-fill-dark-primary-active, var(--wsr-color-D10, #000624))
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-primary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--skin-dark#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-dark-primary-disabled,
      var(
        --wds-color-fill-dark-primary-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-primary-disabled,
      var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff))
    );
  }

  &#{&}--skin-dark#{&}--priority-secondary {
    background-color: var(
      --wds-icon-button-color-fill-dark-secondary,
      var(--wds-color-fill-light-secondary, transparent)
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-dark-secondary,
        var(--wds-color-border-dark-primary, var(--wsr-color-D40, #868aa5))
      );
    color: var(
      --wds-icon-button-color-text-dark-secondary,
      var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
    );
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-secondary:hover {
      background-color: var(
        --wds-icon-button-color-fill-dark-secondary-hover,
        var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853))
      );
      border-color: var(
        --wds-icon-button-color-fill-dark-secondary-hover,
        var(--wds-color-fill-dark-primary-hover, var(--wsr-color-D20, #333853))
      );
      color: var(
        --wds-icon-button-color-text-dark-secondary-hover,
        var(
          --wds-color-text-standard-primary-light,
          var(--wsr-color-D80, #ffffff)
        )
      );
    }
  }

  &#{&}--skin-dark#{&}--priority-secondary:active {
    background-color: var(
      --wds-icon-button-color-fill-dark-secondary-active,
      var(--wds-color-fill-dark-primary-active, var(--wsr-color-D10, #000624))
    );
    border-color: var(
      --wds-icon-button-color-fill-dark-secondary-active,
      var(--wds-color-fill-dark-primary-active, var(--wsr-color-D10, #000624))
    );
    color: var(
      --wds-icon-button-color-text-dark-secondary-active,
      var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      )
    );
  }

  &#{&}--skin-dark#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-dark-secondary-disabled,
      var(--wds-color-fill-light-secondary-disabled, transparent)
    );
    border: solid 1px
      var(
        --wds-icon-button-color-border-dark-secondary-disabled,
        var(
          --wds-color-border-dark-secondary-disabled,
          var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
        )
      );
    color: var(
      --wds-icon-button-color-text-dark-secondary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--skin-dark#{&}--priority-tertiary {
    background-color: var(
      --wds-icon-button-color-fill-dark-tertiary,
      var(--wds-color-fill-light-secondary, transparent)
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-tertiary,
      var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
    );
  }

  @media (hover: hover) {
    &#{&}--skin-dark#{&}--priority-tertiary:hover {
      background: var(
        --wds-icon-button-color-fill-dark-tertiary-hover,
        var(--wds-color-fill-dark-tertiary-hover, transparent)
      );
      border: none;
      color: var(
        --wds-icon-button-color-text-dark-tertiary-hover,
        var(--wds-color-text-standard-primary, var(--wsr-color-D20, #333853))
      );
    }
  }

  &#{&}--skin-dark#{&}--priority-tertiary:active {
    background: var(
      --wds-icon-button-color-fill-dark-tertiary-active,
      var(--wds-color-fill-dark-tertiary-active, transparent)
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-tertiary-active,
      var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
    );
  }

  &#{&}--skin-dark#{&}--priority-tertiary#{&}--disabled {
    background-color: var(
      --wds-icon-button-color-fill-dark-tertiary-disabled,
      var(--wds-color-fill-light-secondary-disabled, transparent)
    );
    border: none;
    color: var(
      --wds-icon-button-color-text-dark-tertiary-disabled,
      var(
        --wds-color-text-disabled,
        var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
      )
    );
  }

  &#{&}--skin-ai {
    background: var(--wds-icon-button-color-fill-ai-primary, var(--wds-color-fill-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
    border: var(--wds-icon-button-border-ai-width, var(--wds-border-width-none, 0)) solid var(--wds-icon-button-color-border-ai-primary, transparent);
    color: var(--wds-icon-button-color-text-ai-primary, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-ai:hover {
      background: var(--wds-icon-button-color-fill-ai-primary-hover, var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%)));
      border-color: var(--wds-icon-button-color-border-ai-primary-hover, transparent);
    }
  }

  &#{&}--skin-ai:active {
    background: var(--wds-icon-button-color-fill-ai-primary-active, var(--wds-color-fill-ai-primary-active, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
    border-color: var(--wds-icon-button-color-border-ai-primary-active, transparent);
  }

  &#{&}--skin-ai#{&}--disabled {
    background: var(--wds-icon-button-color-fill-ai-primary-disabled, var(--wds-color-fill-ai-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    border-color: transparent;
    color: var(--wds-icon-button-color-text-ai-primary-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-ai#{&}--priority-secondary {
    background: var(--wds-icon-button-color-fill-ai-secondary, var(--wds-color-fill-ai-primary, var(--wsr-color-D80, #FFFFFF)));
    border: var(--wds-icon-button-border-ai-width, var(--wds-border-width-none, 0)) solid var(--wds-icon-button-color-border-ai-secondary, transparent);
    color: var(--wds-icon-button-color-text-ai-secondary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
    position: relative;
    z-index: 0;
  }

  &#{&}--skin-ai#{&}--priority-secondary:not(:hover):not(:active):not(&--disabled)::after {
    content: '';
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, white, white), var(--wds-color-border-ai-primary, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%));
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: inherit;
    display: var(--wds-icon-button-border-ai-secondary-ring-display, block);
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-secondary:hover {
      background: var(--wds-icon-button-color-fill-ai-secondary-hover, var(--wds-color-fill-ai-primary-hover, linear-gradient(60deg, #0021FF -177%, #116DFF 32%, #5FF2AE 96%)));
      border-color: var(--wds-icon-button-color-border-ai-secondary-hover, transparent);
      color: var(--wds-icon-button-color-text-ai-secondary-hover, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
    }
  }

  &#{&}--skin-ai#{&}--priority-secondary:active {
    background: var(--wds-icon-button-color-fill-ai-secondary-active, var(--wds-color-fill-ai-primary-active, linear-gradient(60deg, #0021FF -31%, #116DFF 65%, #5FF2AE 96%)));
    border-color: var(--wds-icon-button-color-border-ai-secondary-active, transparent);
    color: var(--wds-icon-button-color-text-ai-secondary-active, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--skin-ai#{&}--priority-secondary#{&}--disabled {
    background: var(--wds-icon-button-color-fill-ai-secondary-disabled, var(--wds-color-fill-standard-tertiary-disabled, var(--wsr-color-D80, #FFFFFF)));
    border: 1px solid var(--wds-icon-button-color-border-ai-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    color: var(--wds-icon-button-color-text-ai-secondary-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-ai#{&}--priority-tertiary {
    background: var(--wds-icon-button-color-fill-ai-tertiary, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    border: none;
    color: var(--wds-icon-button-color-text-ai-tertiary, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
  }

  @media (hover: hover) {
    &#{&}--skin-ai#{&}--priority-tertiary:hover {
      background: var(--wds-icon-button-color-fill-ai-tertiary-hover, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
      border-color: transparent;
      color: var(--wds-icon-button-color-text-ai-tertiary-hover, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
    }
  }

  &#{&}--skin-ai#{&}--priority-tertiary:active {
    background: var(--wds-icon-button-color-fill-ai-tertiary-active, transparent);
    border-color: transparent;
    color: var(--wds-icon-button-color-text-ai-tertiary-active, var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF)));
  }

  &#{&}--skin-ai#{&}--priority-tertiary#{&}--disabled {
    background: var(--wds-icon-button-color-fill-ai-tertiary-disabled, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    border-color: transparent;
    color: var(--wds-icon-button-color-text-ai-tertiary-disabled, var(--wds-color-fill-dark-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--skin-destructive {
    background-color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
    border: none;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive:hover {
      background-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      border: none;
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-destructive:active {
    background-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    border: none;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-destructive#{&}--disabled {
    background-color: var(
      --wds-color-fill-destructive-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    border: none;
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80, #ffffff));
  }

  &#{&}--skin-destructive#{&}--priority-secondary {
    background-color: var(
      --wds-color-fill-destructive-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(--wds-color-border-destructive-primary, var(--wsr-color-R30, #f69891));
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-secondary:hover {
      background-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      border-color: var(
        --wds-color-fill-destructive-primary-hover,
        var(--wsr-color-R05, #d0180b)
      );
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
    }
  }

  &#{&}--skin-destructive#{&}--priority-secondary:active {
    background-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    border-color: var(
      --wds-color-fill-destructive-primary-active,
      var(--wsr-color-R00, #b81206)
    );
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &#{&}--skin-destructive#{&}--priority-secondary#{&}--disabled {
    background-color: var(
      --wds-color-fill-destructive-tertiary-disabled,
      var(--wsr-color-D80, #ffffff)
    );
    border: solid 1px
      var(
        --wds-color-border-standard-secondary-disabled,
        var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
      );
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--skin-destructive#{&}--priority-tertiary {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  @media (hover: hover) {
    &#{&}--skin-destructive#{&}--priority-tertiary:hover {
      background-color: var(
        --wds-color-fill-destructive-secondary,
        var(--wsr-color-R40, #fbd0cd)
      );
      border: none;
      color: var(
        --wds-color-fill-destructive-primary,
        var(--wsr-color-R10, #e62214)
      );
    }
  }

  &#{&}--skin-destructive#{&}--priority-tertiary:active {
    background-color: var(
      --wds-color-fill-destructive-tertiary-active,
      var(--wsr-color-R40, #fbd0cd)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &#{&}--skin-destructive#{&}--priority-tertiary#{&}--disabled {
    background: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    border: none;
    color: var(
      --wds-color-fill-destructive-primary-disabled,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &#{&}--size-tiny {
    width: var(--wds-button-size-tiny, var(--wds-space-400, 24px));
    height: var(--wds-button-size-tiny, var(--wds-space-400, 24px));
    border-radius: var(
      --wds-button-border-radius-tiny,
      var(--wds-border-radius-full, 50%)
    );
  }

  &#{&}--size-small {
    width: var(--wds-button-size-small, var(--wds-space-500, 30px));
    height: var(--wds-button-size-small, var(--wds-space-500, 30px));
    border-radius: var(
      --wds-button-border-radius-small,
      var(--wds-border-radius-full, 50%)
    );
  }

  &#{&}--size-large {
    width: var(--wds-button-size-large, var(--wds-space-700, 42px));
    height: var(--wds-button-size-large, var(--wds-space-700, 42px));
    border-radius: var(
      --wds-button-border-radius-large,
      var(--wds-border-radius-full, 50%)
    );
  }
}