.toggle-button {
  &--skin-standard {
    --background-color-hover: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-fill-standard-tertiary-hover));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-fill-standard-tertiary-hover));
    --border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-fill-standard-tertiary));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wds-color-border-standard-tertiary));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wds-color-fill-standard-secondary-disabled));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
    --outer-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
    --outer-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
  }

  &--skin-standard-secondary {
    --background-color-hover: var(--wds-toggle-button-fill-standard-secondary-hover, var(--wds-color-fill-standard-tertiary-hover));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-fill-standard-tertiary-hover));
    --border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-fill-standard-tertiary));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wds-color-border-standard-tertiary));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wds-color-fill-standard-secondary-disabled));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-standard-secondary-hover, var(--wds-color-text-standard-primary));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
    --outer-label-weight-selected: var(--wds-toggle-button-label-font-weight-standard-secondary-selected, var(--wds-font-weight-semi-bold));
    --outer-label-color-hover: var(--wds-toggle-button-label-fill-standard-secondary-hover, var(--wds-color-text-standard-primary));
    --outer-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-text-standard-primary));
    --outer-label-color-selected-hover: var(--wds-toggle-button-label-fill-standard-secondary-selected-hover, var(--wds-color-text-primary));
  }

  &--skin-dark {
    --background-color: var(--wds-toggle-button-fill-dark, var(--wds-color-fill-standard-tertiary));
    --background-color-hover: var(--wds-toggle-button-fill-dark-hover, var(--wds-color-fill-standard-tertiary-hover));
  }

  &--skin-inverted {
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-inverted-hover, var(--wds-color-text-standard-primary));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-inverted-hover, var(--wds-color-text-standard-primary));
  }

  &--skin-standard-secondary &__icon {
    border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-fill-standard-tertiary));
  }

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

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

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

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

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

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

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

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

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

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

  &--shape-square:not(&--label-placement-tooltip):not(&--has-icon):is(&--label-placement-end, &--label-placement-start)#{&}--size-tiny
    &__icon {
    padding-inline: var(--wds-space-150);
  }

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

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

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

  &#{&}--shape-pill#{&}--size-small &__label {
    font-size: var(--wds-toggle-button-label-font-size-round-small, var(--wds-font-size-body-tiny));
    line-height: var(--wds-toggle-button-label-font-line-height-round-small, var(--wds-font-line-height-body-tiny));
  }

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

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

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

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

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

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

  @media (hover: hover) {
    &--skin-standard-secondary:hover &__icon {
      border-color: var(--wds-toggle-button-border-color-standard-hover, var(--wds-color-border-standard-tertiary));
    }
  }
}