.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-secondary));
    --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-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-secondary));
    --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-active: 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-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 {
    --background-color: var(--wds-toggle-button-fill-inverted, var(--wds-color-fill-standard-secondary));
    --background-color-hover: var(--wds-toggle-button-fill-inverted-hover, var(--wds-color-fill-standard-secondary-hover));
    --background-color-active: var(--wds-toggle-button-fill-inverted-hover, var(--wds-color-fill-standard-secondary-hover));
    --background-color-disabled: var(--wds-toggle-button-fill-inverted-disabled, var(--wds-color-fill-standard-secondary-disabled));
    --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-secondary));
  }

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

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

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

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

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

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

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

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

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

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

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

  &--shape-square#{&}--label-placement-start:not(&--label-placement-tooltip)#{&}--size-large
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-large, var(--wds-space-600)) calc(var(--wds-toggle-button-padding-large, var(--wds-space-600)) / 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-300);
  }

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

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

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

  &--shape-square &__label {
    font-weight: var(--wds-toggle-button-label-font-weight-square, var(--wds-font-weight-semi-bold));
  }

  &--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-medium
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-medium-round, var(--wds-space-500)) calc(var(--wds-toggle-button-padding-medium-round, var(--wds-space-500)) - var(--wds-space-100));
  }

  &--shape-pill#{&}--label-placement-start#{&}--size-large
    &__icon {
    padding-inline: var(--wds-toggle-button-padding-large-round, var(--wds-space-600)) calc(var(--wds-toggle-button-padding-large-round, var(--wds-space-600)) - 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-medium &__icon {
    padding-inline: calc(var(--wds-toggle-button-padding-medium-round, var(--wds-space-500)) - var(--wds-space-100)) var(--wds-toggle-button-padding-medium-round, var(--wds-space-500));
  }

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

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