.toggle-button {
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  background-color: transparent;
  color: var(--outer-label-color);
  border-radius: var(--wds-toggle-button-border-radius-square-medium, var(--wds-border-radius-400));

  &--size-tiny &__icon {
    height: var(--wds-button-size-tiny, 24px);
  }

  &--size-small &__icon {
    height: var(--wds-button-size-small, 30px);
  }

  &--size-medium &__icon {
    height: var(--wds-button-size-medium, 36px);
  }

  &--size-large &__icon {
    height: var(--wds-button-size-large, 42px);
  }

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

  /* Dormant state */
  & &__icon {
    display: flex;
    background-color: var(--background-color);
    box-sizing: border-box;
  }

  &#{&} &__label {
    display: flex;
    color: var(--outer-label-color);
  }

  & &__icon,
  &#{&} &__icon &__label {
    color: var(--inner-label-color);
  }

  &--border &__icon {
    outline-color: var(--border-color);
  }

  /* Hover */
  &:hover:not(&--mobile):not(&--disabled) {
    color: var(--outer-label-color-hover);
  }

  &:hover:not(&--mobile):not(&--disabled) &__icon {
    background-color: var(--background-color-hover);
  }

  &#{&}:hover:not(&--mobile):not(&--disabled) &__label {
    color: var(--outer-label-color-hover);
  }

  &:hover:not(&--mobile):not(&--disabled) &__icon,
  &#{&}:hover:not(&--mobile):not(&--disabled) &__icon &__label {
    color: var(--inner-label-color-hover);
  }

  &--border:hover:not(&--mobile):not(&--disabled) &__icon {
    outline-color: var(--border-color-hover);
  }

  /* Active */
  &:active:not(&--mobile):not(&--disabled) {
    color: var(--outer-label-color-active);
  }

  &:active:not(&--mobile):not(&--disabled) &__icon {
    background-color: var(--background-color-active);
  }

  &#{&}:active:not(&--mobile):not(&--disabled) &__label {
    color: var(--outer-label-color-active);
  }

  &:active:not(&--mobile):not(&--disabled) &__icon,
  &#{&}:active:not(&--mobile):not(&--disabled) &__icon &__label {
    color: var(--inner-label-color-active);
  }

  &--border:active:not(&--mobile):not(&--disabled) &__icon {
    outline-color: var(--border-color-active);
  }

  /* Disabled */
  &--disabled {
    color: var(--outer-label-color-disabled);
  }

  &--disabled &__icon {
    background-color: var(--background-color-disabled);
  }

  &#{&}--disabled &__label {
    color: var(--outer-label-color-disabled);
  }

  &--disabled &__icon,
  &#{&}--disabled &__icon &__label {
    color: var(--inner-label-color-disabled);
  }

  &--disabled#{&}--border &__icon {
    outline-color: var(--border-color-disabled);
  }

  /* Selected */
  &--selected {
    color: var(--outer-label-color-selected);
  }

  &--selected &__icon {
    background-color: var(--background-color-selected);
  }

  &#{&}--selected &__label {
    color: var(--outer-label-color-selected);
  }

  &--selected &__icon,
  &#{&}--selected &__icon &__label {
    color: var(--inner-label-color-selected);
  }

  &--selected#{&}--border &__icon {
    outline-color: var(--border-color-selected);
  }

  /* Selected - Hover */
  &--selected:hover:not(&--mobile):not(&--disabled) {
    color: var(--outer-label-color-selected-hover);
  }

  &--selected:hover:not(&--mobile):not(&--disabled) &__icon {
    background-color: var(--background-color-selected-hover);
  }

  &#{&}--selected:hover:not(&--mobile):not(&--disabled) &__label {
    color: var(--outer-label-color-selected-hover);
  }

  &--selected:hover:not(&--mobile):not(&--disabled) &__icon,
  &#{&}--selected:hover:not(&--mobile):not(&--disabled) &__icon &__label {
    color: var(--inner-label-color-selected-hover);
  }

  &--selected#{&}--border:hover:not(&--mobile):not(&--disabled) &__icon {
    outline-color: var(--border-color-selected-hover);
  }

  /* Selected - Disabled */
  &--selected#{&}--disabled {
    color: var(--outer-label-color-selected-disabled);
  }

  &--selected#{&}--disabled &__icon {
    background-color: var(--background-color-selected-disabled);
  }

  &#{&}--selected#{&}--disabled &__label {
    color: var(--outer-label-color-selected-disabled);
  }

  &--selected#{&}--disabled &__icon,
  &#{&}--selected#{&}--disabled &__icon &__label {
    color: var(--inner-label-color-selected-disabled);
  }

  &--selected#{&}--disabled#{&}--border &__icon {
    outline-color: var(--border-color-selected-disabled);
  }

  /* Skins - set the component-scoped custom properties */
  &--skin-standard {
    /* Background Colors - Icon/Background States */
    --background-color: var(--wds-toggle-button-fill-standard, var(--wsr-color-D80, #ffffff));
    --background-color-hover: var(--wds-toggle-button-fill-standard-hover, var(--wsr-color-D80, #ffffff));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wsr-color-D80, #ffffff));
    --background-color-disabled: var(--wds-toggle-button-fill-standard-disabled, var(--wsr-color-D80, #ffffff));
    --background-color-selected: var(--wds-toggle-button-fill-standard-selected, var(--wsr-color-B40, #d6e6fe));
    --background-color-selected-hover: var(--wds-toggle-button-fill-standard-selected-hover, var(--wsr-color-B50, #e7f0ff));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-standard-selected-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

    /* Border Colors - Same as outline colors */
    --border-color: var(--wds-toggle-button-border-color-standard, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wsr-color-B40, #d6e6fe));
    --border-color-active: var(--wds-color-border-standard-tertiary-active, var(--wsr-color-B30, #a8caff));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    /* Text/Label Colors */
    --inner-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B10, #116dff));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B20, #5999ff));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-standard-selected, var(--wsr-color-B10, #116dff));
    --inner-label-color-selected-hover: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-standard-selected-disabled, var(--wsr-color-D55, #cfd1dc));

    --outer-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B10, #116dff));
    --outer-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B20, #5999ff));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-toggle-button-label-fill-standard-selected, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-hover: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-standard-secondary {
    --background-color: var(--wds-toggle-button-fill-standard, var(--wsr-color-D80, #ffffff));
    --background-color-hover: var(--wds-toggle-button-fill-standard-secondary-hover, var(--wds-color-blue-350, var(--wsr-color-D80, #ffffff)));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wsr-color-D80, #ffffff));
    --background-color-disabled: var(--wds-toggle-button-fill-standard-disabled, var(--wsr-color-D80, #ffffff));
    --background-color-selected: var(--wds-toggle-button-fill-standard-secondary-selected, var(--wsr-color-B40, #d6e6fe));
    --background-color-selected-hover: var(--wds-toggle-button-fill-standard-secondary-selected-hover, var(--wds-color-blue-300, var(--wsr-color-B50, #e7f0ff)));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-standard-selected-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

    --border-color: var(--wds-toggle-button-border-color-standard, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wsr-color-B40, #d6e6fe));
    --border-color-active: var(--wds-color-border-standard-tertiary-active, var(--wsr-color-B30, #a8caff));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    --inner-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-standard-secondary-hover, var(--wsr-color-B10, #116dff));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B20, #5999ff));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-standard-selected, var(--wsr-color-B10, #116dff));
    --inner-label-color-selected-hover: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-standard-selected-disabled, var(--wsr-color-D55, #cfd1dc));

    --outer-label-weight-selected: var(--wds-toggle-button-label-font-weight-standard-secondary-selected, 500);
    --outer-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-toggle-button-label-fill-standard-secondary-hover, var(--wsr-color-B10, #116dff));
    --outer-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wsr-color-B20, #5999ff));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-toggle-button-label-fill-standard-selected, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-hover: var(--wds-toggle-button-label-fill-standard-secondary-selected-hover, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-dark {
    --background-color: var(--wds-toggle-button-fill-dark, var(--wsr-color-D80, #ffffff));
    --background-color-hover: var(--wds-toggle-button-fill-dark-hover, var(--wsr-color-D80, #ffffff));
    --background-color-active: var(--wds-toggle-button-fill-dark-selected-hover, var(--wsr-color-D20, #333853));
    --background-color-disabled: var(--wds-toggle-button-fill-dark-disabled, var(--wsr-color-D80, #ffffff));
    --background-color-selected: var(--wds-toggle-button-fill-dark-selected, var(--wsr-color-D10, #000624));
    --background-color-selected-hover: var(--wds-toggle-button-fill-dark-selected-hover, var(--wsr-color-D20, #333853));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-dark-selected-disabled, initial);

    --border-color: var(--wds-toggle-button-border-color-dark, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-toggle-button-border-color-dark-hover, var(--wsr-color-B40, #d6e6fe));
    --border-color-active: var(--wds-toggle-button-border-color-dark-hover, var(--wsr-color-B40, #d6e6fe));
    --border-color-disabled: var(--wds-toggle-button-border-color-dark-disabled, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    --inner-label-color: var(--wds-toggle-button-label-fill-dark-default, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-dark-hover, var(--wsr-color-D30, #595d70));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-dark-selected, var(--wsr-color-D80, #ffffff));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-dark-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-dark-selected, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-hover: var(--wds-toggle-button-label-fill-dark-selected-hover, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-dark-selected-disabled, var(--wsr-color-D55, #cfd1dc));

    --outer-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-color-text-standard-primary, var(--wsr-color-D30, #595d70));
    --outer-label-color-active: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-dark-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-selected-hover: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-inverted {
    --background-color: var(--wds-toggle-button-fill-inverted, transparent);
    --background-color-hover: var(--wds-toggle-button-fill-inverted-hover, var(--wsr-color-B50, #e7f0ff));
    --background-color-active: var(--wds-toggle-button-fill-inverted-hover, var(--wsr-color-B50, #e7f0ff));
    --background-color-disabled: var(--wds-toggle-button-fill-inverted-disabled, transparent);
    --background-color-selected: var(--wds-toggle-button-fill-inverted-selected, var(--wsr-color-B10, #116dff));
    --background-color-selected-hover: var(--wds-toggle-button-fill-inverted-selected-hover, var(--wsr-color-B20, #5999ff));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-inverted-selected-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

    --border-color: var(--wds-toggle-button-border-color-inverted, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-toggle-button-border-color-inverted-hover, var(--wsr-color-B40, #d6e6fe));
    --border-color-active: var(--wds-color-border-standard-tertiary-active, var(--wsr-color-B30, #a8caff));
    --border-color-disabled: var(--wds-toggle-button-border-color-inverted-disabled, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    --inner-label-color: var(--wds-toggle-button-label-fill-inverted-default, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-inverted-hover, var(--wsr-color-B10, #116dff));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-inverted-hover, var(--wsr-color-B20, #5999ff));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-inverted-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-inverted-selected, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-hover: var(--wds-toggle-button-label-fill-inverted-selected, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-inverted-selected-disabled, var(--wsr-color-D55, #cfd1dc));

    --outer-label-color: var(--wds-toggle-button-label-fill-inverted-default, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --outer-label-color-active: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-inverted-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-hover: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-destructive {
    --background-color: var(--wds-color-fill-destructive-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-hover: var(--wds-color-fill-destructive-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-active: var(--wds-color-fill-destructive-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-disabled: var(--wds-color-fill-destructive-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-selected: var(--wds-color-fill-destructive-primary, var(--wsr-color-R10, #e62214));
    --background-color-selected-hover: var(--wds-color-fill-destructive-primary-hover, var(--wsr-color-R20, #ff6d63));
    --background-color-selected-disabled: var(--wds-color-fill-destructive-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

    --border-color: var(--wds-color-border-destructive-tertiary, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-color-border-destructive-tertiary-hover, var(--wsr-color-R30, #f69891));
    --border-color-active: var(--wds-color-border-destructive-tertiary-hover, var(--wsr-color-R30, #f69891));
    --border-color-disabled: var(--wds-color-border-destructive-tertiary, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    --inner-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --inner-label-color-active: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --inner-label-color-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-hover: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-disabled: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7)));

    --outer-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --outer-label-color-active: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --outer-label-color-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --outer-label-color-selected-hover: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-success {
    --background-color: var(--wds-color-fill-success-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-hover: var(--wds-color-fill-success-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-active: var(--wds-color-fill-success-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-disabled: var(--wds-color-fill-success-tertiary, var(--wsr-color-D80, #ffffff));
    --background-color-selected: var(--wds-color-fill-success-primary, var(--wsr-color-G10, #25a55a));
    --background-color-selected-hover: var(--wds-color-fill-success-primary-hover, var(--wsr-color-G20, #51b77b));
    --background-color-selected-disabled: var(--wds-color-fill-success-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));

    --border-color: var(--wds-color-border-success-tertiary, var(--wsr-color-D60, #dfe5eb));
    --border-color-hover: var(--wds-color-border-success-tertiary-hover, var(--wsr-color-G30, #87cea5));
    --border-color-active: var(--wds-color-border-success-tertiary-hover, var(--wsr-color-G30, #87cea5));
    --border-color-disabled: var(--wds-color-border-success-tertiary, var(--wsr-color-D60, #dfe5eb));
    --border-color-selected: transparent;
    --border-color-selected-hover: transparent;
    --border-color-selected-disabled: transparent;

    --inner-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --inner-label-color-hover: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --inner-label-color-active: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --inner-label-color-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
    --inner-label-color-selected: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-hover: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff));
    --inner-label-color-selected-disabled: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7)));

    --outer-label-color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    --outer-label-color-hover: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --outer-label-color-active: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --outer-label-color-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
    --outer-label-color-selected: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --outer-label-color-selected-hover: var(--wds-color-text-success, var(--wsr-color-G10, #25a55a));
    --outer-label-color-selected-disabled: var(--wds-color-text-disabled, var(--wsr-color-D55, #cfd1dc));
  }

  /* Shadows */
  &--skin-standard#{&}--selected:not(&--disabled)
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-tertiary, 0) var(--wds-toggle-button-shadow-y-tertiary, 0) var(--wds-toggle-button-shadow-blur-tertiary, 0) var(--wds-toggle-button-shadow-spread-tertiary, -0.75px) var(--wds-toggle-button-shadow-fill-tertiary, transparent),
      var(--wds-toggle-button-shadow-x-secondary, 0) var(--wds-toggle-button-shadow-y-secondary, 0) var(--wds-toggle-button-shadow-blur-secondary, 0) var(--wds-toggle-button-shadow-spread-secondary, -1.5px) var(--wds-toggle-button-shadow-fill-secondary, transparent),
      var(--wds-toggle-button-shadow-x-primary, 0) var(--wds-toggle-button-shadow-y-primary, 0) var(--wds-toggle-button-shadow-blur-primary, 0) 0 var(--wds-toggle-button-shadow-fill-primary, transparent),
      var(--wds-toggle-button-inner-shadow-x-secondary, 0) var(--wds-toggle-button-inner-shadow-y-secondary, 0) var(--wds-toggle-button-inner-shadow-blur-secondary, 0) 0 var(--wds-toggle-button-inner-shadow-fill-secondary, transparent) inset,
      var(--wds-toggle-button-inner-shadow-x-primary, 0) var(--wds-toggle-button-inner-shadow-y-primary, 0) var(--wds-toggle-button-inner-shadow-blur-primary, 0) 0 var(--wds-toggle-button-inner-shadow-fill-primary, transparent) inset;
  }

  &--skin-inverted:not(&--disabled)#{&}--selected
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-primary-inverted, 0) var(--wds-toggle-button-shadow-y-primary-inverted, 0) var(--wds-toggle-button-shadow-blur-primary-inverted, 0) var(--wds-toggle-button-shadow-spread-primary-inverted, 0) var(--wds-toggle-button-shadow-fill-primary-inverted, transparent),
      var(--wds-toggle-button-shadow-x-secondary-inverted, 0) var(--wds-toggle-button-shadow-y-secondary-inverted, 0) var(--wds-toggle-button-shadow-blur-secondary-inverted, 0) 0 var(--wds-toggle-button-shadow-fill-secondary-inverted, transparent),
      var(--wds-toggle-button-shadow-x-tertiary-inverted, 0) var(--wds-toggle-button-shadow-y-tertiary-inverted, 0) var(--wds-toggle-button-shadow-blur-tertiary-inverted, 0) 0 var(--wds-toggle-button-shadow-fill-tertiary-inverted, transparent);
  }

  &--skin-inverted:not(&--disabled)#{&}--selected:hover:not(&--mobile)
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-primary-inverted, 0) var(--wds-toggle-button-shadow-y-primary-inverted, 0) var(--wds-toggle-button-shadow-blur-primary-inverted, 0) var(--wds-toggle-button-shadow-spread-primary-inverted, 0) var(--wds-toggle-button-shadow-fill-primary-inverted, transparent),
      var(--wds-toggle-button-shadow-x-secondary-inverted, 0) var(--wds-toggle-button-shadow-y-secondary-inverted, 0) var(--wds-toggle-button-shadow-blur-secondary-inverted, 0) 0 var(--wds-toggle-button-shadow-fill-secondary-inverted, transparent),
      var(--wds-toggle-button-shadow-x-tertiary-inverted, 0) var(--wds-toggle-button-shadow-y-tertiary-inverted, 0) var(--wds-toggle-button-shadow-blur-tertiary-inverted, 0) 0 var(--wds-toggle-button-shadow-fill-tertiary-inverted, transparent);
  }

  &:is(&--label-placement-end, &--label-placement-start, &--label-placement-bottom) {
    display: block;
    max-width: 100%;
  }

  /* Border (standard-secondary) */
  &--skin-standard-secondary &__icon {
    border-color: var(--wds-toggle-button-border-color-standard, #e2e3ea);
    border-style: solid;
    border-width: var(--wds-border-width-varied, 1px);
  }

  @media (hover: hover) {
    &--skin-standard-secondary:hover:not(&--disabled) &__icon {
      border-color: var(--wds-toggle-button-border-color-standard-hover, #e2e3ea);
      border-style: solid;
      border-width: var(--wds-border-width-varied, 1px);
    }
  }

  /* icon */
  &__icon {
    display: flex;
    position: relative;
    align-items: center;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    transition: all 100ms linear;
  }

  /* Base icon sizes */
  &--shape-square#{&}--size-tiny &__icon {
    border-radius: var(--wds-toggle-button-border-radius-square-tiny, 4px);
  }

  &--shape-square#{&}--size-small &__icon {
    border-radius: var(--wds-toggle-button-border-radius-square-small, 4px);
  }

  &--shape-square#{&}--size-medium &__icon {
    border-radius: var(--wds-toggle-button-border-radius-square-medium, 6px);
  }

  &--shape-square#{&}--size-large &__icon {
    border-radius: var(--wds-toggle-button-border-radius-square-large, 6px);
  }

  /* Icon sizes when label at end is present */
  &--shape-square#{&}--label-placement-end:not(&--label-placement-tooltip)#{&}--size-tiny
    &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-tiny, 6px) / 2) var(--wds-toggle-button-padding-tiny, 6px);
  }

  &--shape-square#{&}--label-placement-end:not(&--label-placement-tooltip)#{&}--size-small
    &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-small, 12px) / 2) var(--wds-toggle-button-padding-small, 12px);
  }

  &--shape-square#{&}--label-placement-end:not(&--label-placement-tooltip)#{&}--size-medium
    &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-medium, 12px) / 2) var(--wds-toggle-button-padding-medium, 12px);
  }

  &--shape-square#{&}--label-placement-end:not(&--label-placement-tooltip)#{&}--size-large
    &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-large, 18px) / 2) var(--wds-toggle-button-padding-large, 18px);
  }

  /* Icon sizes when label at start is present */
  &--shape-square#{&}--label-placement-start:not(&--label-placement-tooltip)#{&}--size-tiny
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-tiny, 6px) calc(var(--wds-toggle-button-padding-tiny, 6px) / 2);
  }

  &--shape-square#{&}--label-placement-start:not(&--label-placement-tooltip)#{&}--size-small
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-small, 12px) calc(var(--wds-toggle-button-padding-small, 12px) / 2);
  }

  &--shape-square#{&}--label-placement-start:not(&--label-placement-tooltip)#{&}--size-medium
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-medium, 12px) calc(var(--wds-toggle-button-padding-medium, 12px) / 2);
  }

  &--shape-square#{&}--label-placement-start:not(&--label-placement-tooltip)#{&}--size-large
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-large, 18px) calc(var(--wds-toggle-button-padding-large, 18px) / 2);
  }

  /* Label only (no icon) padding for square shape */
  &--shape-square:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-tiny
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-tiny, 6px);
  }

  &--shape-square:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-small
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-small, 12px);
  }

  &--shape-square:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-medium
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-medium, 12px);
  }

  &--shape-square:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-large
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-large, 18px);
  }

  &:is(&--shape-round, &--shape-pill)
    &__icon {
    border-radius: var(--wds-border-radius-full, 100px);
  }

  &:is(&--label-placement-tooltip, &--label-placement-bottom):not(&--shape-pill)
    &__icon,
  &--shape-round &__icon {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
  }

  &:is(&--label-placement-tooltip, &--label-placement-bottom)#{&}--size-tiny:not(&--shape-pill)
    &__icon,
  &--shape-round#{&}--size-tiny &__icon {
    width: var(--wds-button-size-tiny, 24px);
  }

  &:is(&--label-placement-tooltip, &--label-placement-bottom)#{&}--size-small:not(&--shape-pill)
    &__icon,
  &--shape-round#{&}--size-small &__icon {
    width: var(--wds-button-size-small, 30px);
  }

  &:is(&--label-placement-tooltip, &--label-placement-bottom)#{&}--size-medium:not(&--shape-pill)
    &__icon,
  &--shape-round#{&}--size-medium &__icon {
    width: var(--wds-button-size-medium, 36px);
  }

  &:is(&--label-placement-tooltip, &--label-placement-bottom)#{&}--size-large:not(&--shape-pill)
    &__icon,
  &--shape-round#{&}--size-large &__icon {
    width: var(--wds-button-size-large, 42px);
  }

  /* Font styles */
  /* Label rules are compounded to match the pre-migration Stylable specificity,
     so they beat the label Text's own (0,3,0) typography rules */
  /* Square shape */
  &#{&}--shape-square &__label#{&}__label {
    font-weight: var(--wds-toggle-button-label-font-weight-square, var(--wsr-font-weight-regular, 400));
  }

  &#{&}--shape-square#{&}--size-tiny &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-tiny, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  &#{&}--shape-square#{&}--size-small &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-small, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  &#{&}--shape-square#{&}--size-medium &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-medium, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  &#{&}--shape-square#{&}--size-large &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-large, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  /* Round shape */
  &#{&}--shape-round:not(&--skin-standard-secondary)
    &__label#{&}__label {
    font-weight: var(--wds-toggle-button-label-font-weight-round, var(--wsr-font-weight-regular, 400));
  }

  &#{&}--shape-round:is(&--size-tiny, &--size-small, &--size-medium, &--size-large)
    &__label {
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  &--shape-round
    &__btn-content
    :global([data-content-hook]),
  &--shape-round
    &__btn-content
    :global([data-hook='popover-element']) {
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  /* Pill shape */
  &#{&}--shape-pill#{&}--size-tiny &__label {
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
  }

  &#{&}--shape-pill#{&}--size-small &__label {
    font-size: var(--wds-toggle-button-label-font-size-round-small, var(--wsr-text-font-size-small, 14px));
    line-height: var(--wds-toggle-button-label-font-line-height-round-small, var(--wsr-text-line-height-small, 18px));
  }

  &#{&}--shape-pill#{&}--size-medium &__label {
    font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
    line-height: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
  }

  &#{&}--shape-pill#{&}--size-large &__label {
    font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
    line-height: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
  }

  &#{&}--shape-pill:not(&--skin-standard-secondary)
    &__label#{&}__label {
    font-weight: var(--wds-toggle-button-label-font-weight-pill, var(--wsr-font-weight-regular, 400));
  }

  &#{&}--skin-standard-secondary#{&}--selected
    &__label {
    font-weight: var(--outer-label-weight-selected, var(--wsr-font-weight-regular, 400));
  }

  &--shape-pill#{&}--size-tiny &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-tiny-round, 6px) - var(--wds-space-50, 3px)) var(--wds-toggle-button-padding-tiny-round, 12px);
  }

  &--shape-pill#{&}--label-placement-start#{&}--size-tiny
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-tiny-round, 12px) calc(var(--wds-toggle-button-padding-tiny-round, 6px) - var(--wds-space-50, 3px));
  }

  &--shape-pill#{&}--label-placement-start#{&}--size-small
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-small-round, 18px) calc(var(--wds-toggle-button-padding-small-round, 18px) - var(--wds-space-50, 3px));
  }

  &--shape-pill#{&}--label-placement-start#{&}--size-medium
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-medium-round, 24px) calc(var(--wds-toggle-button-padding-medium-round, 24px) - var(--wds-space-100, 6px));
  }

  &--shape-pill#{&}--label-placement-start#{&}--size-large
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-large-round, 30px) calc(var(--wds-toggle-button-padding-large-round, 30px) - var(--wds-space-100, 6px));
  }

  &--shape-pill#{&}--size-small &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-small-round, 18px) - var(--wds-space-50, 3px)) var(--wds-toggle-button-padding-small-round, 18px);
  }

  &--shape-pill#{&}--size-medium &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-medium-round, 24px) - var(--wds-space-100, 6px)) var(--wds-toggle-button-padding-medium-round, 24px);
  }

  &--shape-pill#{&}--size-large &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-large-round, 30px) - var(--wds-space-100, 6px)) var(--wds-toggle-button-padding-large-round, 30px);
  }

  &--shape-pill:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-tiny
    &__icon {
    padding-inline: var(--wds-button-padding-horizontal-tiny, 12px);
  }

  &--shape-pill:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-small
    &__icon {
    padding-inline: var(--wds-button-padding-horizontal-small, 18px);
  }

  &--shape-pill:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-medium
    &__icon {
    padding-inline: var(--wds-button-padding-horizontal-medium, 24px);
  }

  &--shape-pill:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-large
    &__icon {
    padding-inline: var(--wds-button-padding-horizontal-large, 30px);
  }

  &:is(&--label-placement-end, &--label-placement-start, &--label-placement-bottom)
    &__icon {
    max-width: 100%;
  }

  /* label */
  &__label {
    transition: all 100ms linear;
  }

  &--label-placement-bottom:not(&--shape-pill)
    &__label {
    margin-top: var(--wds-space-150, 9px);
  }

  &__label-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  &--size-tiny &__label-container,
  &--size-tiny &__icon {
    gap: var(--wds-space-50, 3px);
  }

  &--size-small &__label-container,
  &--size-small &__icon,
  &--size-medium &__label-container,
  &--size-medium &__icon {
    gap: var(--wds-space-100, 6px);
  }

  &--size-large &__label-container,
  &--size-large &__icon {
    gap: var(--wds-space-200, 9px);
  }

  &--shape-pill#{&}--size-large &__icon {
    gap: var(--wds-space-200, 12px);
  }

  &__tooltip {
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
  }

  &__tooltip [data-hook='popover-element'] {
    max-width: 100%;
    display: inline-flex;
  }

  /* Border - Base Styles */
  &--border &__icon {
    /* longhands, not the `outline` shorthand, so `outline-color` above is kept */
    /* stylelint-disable-next-line plugin/use-baseline */
    outline-width: 1px;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline-style: solid;
    outline-offset: -1px;
  }

  &--selected:not(&--interactive) {
    pointer-events: none;
  }

  &__tooltip:not(&__tooltip--interactive):not(&__tooltip--disabled) {
    cursor: pointer;
  }

  &--disabled,
  &--disabled &__label {
    cursor: default;
  }

  &__root-icon {
    flex: 0 0 auto;
  }

  /* Make the icon look like it's in the center of a button */
  &--skin-standard#{&}--icon-only &__root-icon {
    margin-right: calc(max(var(--wds-toggle-button-inner-shadow-x-primary, 0), var(--wds-toggle-button-inner-shadow-x-secondary, 0)) * -1);
    margin-bottom: calc(max(var(--wds-toggle-button-inner-shadow-y-primary, 0), var(--wds-toggle-button-inner-shadow-y-secondary, 0)) * -1);
  }

  @media (prefers-reduced-motion) {
    & &__icon,
    & &__label {
      transition: none;
    }
  }
}