// $press-scale: 0.88;

.toggle-button {
  &--skin-standard {
    --background-color: var(--wds-toggle-button-fill-standard, var(--wds-color-black-100-transparent-0));
    --background-color-hover: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-black-100-transparent-0));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-black-100-transparent-0));
    --background-color-disabled: var(--wds-toggle-button-fill-standard-disabled, var(--wds-color-black-100-transparent-0));
    --background-color-selected: var(--wds-toggle-button-fill-standard-selected, var(--wds-color-blue-500));
    --background-color-selected-hover: var(--wds-toggle-button-fill-standard-selected-hover, var(--wds-color-blue-400));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-standard-selected-disabled, var(--wds-color-black-700));
    --border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-white-transparent-0));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wds-color-blue-300));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wds-color-white-transparent-0));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-blue-50));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-blue-50));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wds-color-black-500));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-standard-selected-disabled, var(--wds-color-black-500));
    --outer-label-color-hover: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-blue-50));
    --outer-label-color-active: var(--wds-toggle-button-label-fill-standard-hover, var(--wds-color-blue-50));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wds-color-black-500));
  }

  &--skin-standard-secondary {
    --background-color: var(--wds-toggle-button-fill-standard, var(--wds-color-black-100-transparent-0));
    --background-color-hover: var(--wds-toggle-button-fill-standard-secondary-hover, var(--wds-color-blue-500));
    --background-color-active: var(--wds-toggle-button-fill-standard-hover, var(--wds-color-black-100-transparent-0));
    --background-color-disabled: var(--wds-toggle-button-fill-standard-disabled, var(--wds-color-black-100-transparent-0));
    --background-color-selected: var(--wds-toggle-button-fill-standard-secondary-selected, var(--wds-color-blue-500));
    --background-color-selected-hover: var(--wds-toggle-button-fill-standard-secondary-selected-hover, var(--wds-color-blue-400));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-standard-selected-disabled, var(--wds-color-black-700));
    --border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-white-transparent-0));
    --border-color-hover: var(--wds-toggle-button-border-color-standard-hover, var(--wds-color-blue-300));
    --border-color-disabled: var(--wds-toggle-button-border-color-standard-disabled, var(--wds-color-white-transparent-0));
    --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-blue-50));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wds-color-black-500));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-standard-selected-disabled, var(--wds-color-black-500));
    --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-blue-50));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-standard-disabled, var(--wds-color-black-500));
    --outer-label-color-selected-hover: var(--wds-toggle-button-label-fill-standard-secondary-selected-hover, var(--wds-color-blue-50));
  }

  &--skin-dark {
    --background-color: var(--wds-toggle-button-fill-dark, var(--wds-color-black-100-transparent-0));
    --background-color-hover: var(--wds-toggle-button-fill-dark-hover, var(--wds-color-fill-dark-secondary-hover));
    --background-color-active: var(--wds-toggle-button-fill-dark-selected-hover, var(--wds-color-black-550));
    --background-color-disabled: var(--wds-toggle-button-fill-dark-disabled, var(--wds-color-black-100-transparent-0));
    --background-color-selected: var(--wds-toggle-button-fill-dark-selected, var(--wds-color-black-550));
    --background-color-selected-hover: var(--wds-toggle-button-fill-dark-selected-hover, var(--wds-color-black-550));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-dark-selected-disabled, var(--wds-color-black-700));
    --border-color: var(--wds-toggle-button-border-color-dark, var(--wds-color-white-transparent-0));
    --border-color-hover: var(--wds-toggle-button-border-color-dark-hover, var(--wds-color-white-transparent-0));
    --border-color-active: var(--wds-toggle-button-border-color-dark-hover, var(--wds-color-white-transparent-0));
    --border-color-disabled: var(--wds-toggle-button-border-color-dark-disabled, var(--wds-color-white-transparent-0));
    --inner-label-color-hover: var(--wds-toggle-button-label-fill-dark-hover, var(--wds-color-text-standard-primary));
    --inner-label-color-active: var(--wds-toggle-button-label-fill-dark-selected, var(--wds-color-text-standard-primary));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-dark-disabled, var(--wds-color-black-500));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-dark-selected, var(--wds-color-text-standard-primary));
    --inner-label-color-selected-hover: var(--wds-toggle-button-label-fill-dark-selected-hover, var(--wds-color-text-standard-primary));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-dark-selected-disabled, var(--wds-color-black-500));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-dark-disabled, var(--wds-color-black-500));
  }

  &--skin-inverted {
    --background-color: var(--wds-toggle-button-fill-inverted, var(--wds-color-black-100-transparent-0));
    --background-color-hover: var(--wds-toggle-button-fill-inverted-hover, var(--wds-color-fill-dark-secondary-hover));
    --background-color-active: var(--wds-toggle-button-fill-inverted-hover, var(--wds-color-fill-dark-secondary-hover));
    --background-color-disabled: var(--wds-toggle-button-fill-inverted-disabled, var(--wds-color-black-100-transparent-0));
    --background-color-selected: var(--wds-toggle-button-fill-inverted-selected, var(--wds-color-fill-dark-tertiary));
    --background-color-selected-hover: var(--wds-toggle-button-fill-inverted-selected-hover, var(--wds-color-fill-dark-tertiary-hover));
    --background-color-selected-disabled: var(--wds-toggle-button-fill-inverted-selected-disabled, var(--wds-color-black-700));
    --border-color: var(--wds-toggle-button-border-color-inverted, var(--wds-color-white-transparent-0));
    --border-color-hover: var(--wds-toggle-button-border-color-inverted-hover, var(--wds-color-white-transparent-0));
    --border-color-disabled: var(--wds-toggle-button-border-color-inverted-disabled, var(--wds-color-white-transparent-0));
    --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));
    --inner-label-color-disabled: var(--wds-toggle-button-label-fill-inverted-disabled, var(--wds-color-black-500));
    --inner-label-color-selected: var(--wds-toggle-button-label-fill-inverted-selected, var(--wds-color-text-standard-primary));
    --inner-label-color-selected-hover: var(--wds-toggle-button-label-fill-inverted-selected, var(--wds-color-text-standard-primary));
    --inner-label-color-selected-disabled: var(--wds-toggle-button-label-fill-inverted-selected-disabled, var(--wds-color-black-500));
    --outer-label-color-disabled: var(--wds-toggle-button-label-fill-inverted-disabled, var(--wds-color-black-500));
  }

  &--skin-standard#{&}--selected:not(&--disabled)
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-tertiary, 0.7px) var(--wds-toggle-button-shadow-y-tertiary, 0.7px) var(--wds-toggle-button-shadow-blur-tertiary, 0.8px) var(--wds-toggle-button-shadow-spread-tertiary, -0.75px) var(--wds-toggle-button-shadow-fill-tertiary, var(--wds-color-black-100-transparent-25)),
      var(--wds-toggle-button-shadow-x-secondary, 2px) var(--wds-toggle-button-shadow-y-secondary, 2px) var(--wds-toggle-button-shadow-blur-secondary, var(--wds-shadow-blur-25)) var(--wds-toggle-button-shadow-spread-secondary, -1.5px) var(--wds-toggle-button-shadow-fill-secondary, var(--wds-color-black-100-transparent-20)),
      var(--wds-toggle-button-shadow-x-primary, 1px) var(--wds-toggle-button-shadow-y-primary, 2px) var(--wds-toggle-button-shadow-blur-primary, var(--wds-shadow-blur-50)) 0 var(--wds-toggle-button-shadow-fill-primary, var(--wds-color-black-100-transparent-10)),
      var(--wds-toggle-button-inner-shadow-x-secondary, var(--wds-shadow-x-25)) var(--wds-toggle-button-inner-shadow-y-secondary, var(--wds-shadow-y-25)) var(--wds-toggle-button-inner-shadow-blur-secondary, 1px) 0 var(--wds-toggle-button-inner-shadow-fill-secondary, var(--wds-color-white)) inset,
      var(--wds-toggle-button-inner-shadow-x-primary, var(--wds-shadow-x-25)) var(--wds-toggle-button-inner-shadow-y-primary, var(--wds-shadow-y-25)) var(--wds-toggle-button-inner-shadow-blur-primary, 1px) 0 var(--wds-toggle-button-inner-shadow-fill-primary, var(--wds-color-white)) inset;
  }

  &--skin-inverted:not(&--disabled)#{&}--selected
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-primary-inverted, 1px) var(--wds-toggle-button-shadow-y-primary-inverted, 2px) var(--wds-toggle-button-shadow-blur-primary-inverted, var(--wds-shadow-blur-50)) 0 var(--wds-toggle-button-shadow-fill-primary-inverted, var(--wds-color-black-100-transparent-10)),
      var(--wds-toggle-button-shadow-x-secondary-inverted, 2px) var(--wds-toggle-button-shadow-y-secondary-inverted, 2px) var(--wds-toggle-button-shadow-blur-secondary-inverted, var(--wds-shadow-blur-25)) 0 var(--wds-toggle-button-shadow-fill-secondary-inverted, var(--wds-color-black-100-transparent-20)),
      var(--wds-toggle-button-shadow-x-tertiary-inverted, 0.7px) var(--wds-toggle-button-shadow-y-tertiary-inverted, 0.7px) var(--wds-toggle-button-shadow-blur-tertiary-inverted, 0.8px) 0 var(--wds-toggle-button-shadow-fill-tertiary-inverted, var(--wds-color-black-100-transparent-25));
  }

  &--skin-inverted:not(&--disabled)#{&}--selected:hover:not(&--mobile)
    &__icon {
    box-shadow:
      var(--wds-toggle-button-shadow-x-primary-inverted, 1px) var(--wds-toggle-button-shadow-y-primary-inverted, 2px) var(--wds-toggle-button-shadow-blur-primary-inverted, var(--wds-shadow-blur-50)) 0 var(--wds-toggle-button-shadow-fill-primary-inverted, var(--wds-color-black-100-transparent-10)),
      var(--wds-toggle-button-shadow-x-secondary-inverted, 2px) var(--wds-toggle-button-shadow-y-secondary-inverted, 2px) var(--wds-toggle-button-shadow-blur-secondary-inverted, var(--wds-shadow-blur-25)) 0 var(--wds-toggle-button-shadow-fill-secondary-inverted, var(--wds-color-black-100-transparent-20)),
      var(--wds-toggle-button-shadow-x-tertiary-inverted, 0.7px) var(--wds-toggle-button-shadow-y-tertiary-inverted, 0.7px) var(--wds-toggle-button-shadow-blur-tertiary-inverted, 0.8px) 0 var(--wds-toggle-button-shadow-fill-tertiary-inverted, var(--wds-color-black-100-transparent-25));
  }

  &--skin-standard-secondary &__icon {
    border-color: var(--wds-toggle-button-border-color-standard, var(--wds-color-white-transparent-0));
  }

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

  &--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-200)) / 2) var(--wds-toggle-button-padding-tiny, var(--wds-space-200));
  }

  &--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-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-200)) calc(var(--wds-toggle-button-padding-tiny, var(--wds-space-200)) / 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-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-200);
  }

  &--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-600);
  }

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

  &#{&}--shape-square#{&}--size-medium &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-medium, var(--wds-font-size-body-small));
  }

  &#{&}--shape-square#{&}--size-large &__label {
    font-size: var(--wds-toggle-button-square-label-font-size-large, var(--wds-font-size-body-small));
  }

  &#{&}--shape-round:not(&--skin-standard-secondary)
    &__label#{&}__label {
    font-weight: var(--wds-toggle-button-label-font-weight-round, 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:not(&--skin-standard-secondary)
    &__label#{&}__label {
    font-weight: var(--wds-toggle-button-label-font-weight-pill, var(--wds-font-weight-semi-bold));
  }

  &--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));
  }

  &--skin-standard#{&}--icon-only &__root-icon {
    margin-right: calc(max(var(--wds-toggle-button-inner-shadow-x-primary, var(--wds-shadow-x-25)), var(--wds-toggle-button-inner-shadow-x-secondary, var(--wds-shadow-x-25))) * -1);
    margin-bottom: calc(max(var(--wds-toggle-button-inner-shadow-y-primary, var(--wds-shadow-y-25)), var(--wds-toggle-button-inner-shadow-y-secondary, var(--wds-shadow-y-25))) * -1);
  }

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

  // &:active:not(&--mobile):not(&--disabled) &__icon {
  //   transform: scale($press-scale);
  // }
  //
  // &--icon-only &__root-icon {
  //   transition: transform 100ms linear;
  // }
  //
  // &--icon-only:active:not(&--mobile):not(&--disabled) &__root-icon {
  //   transform: scale(calc(1 / #{$press-scale}));
  // }
  //
  // @media (prefers-reduced-motion) {
  //   &:active:not(&--mobile):not(&--disabled) &__icon,
  //   &--icon-only:active:not(&--mobile):not(&--disabled) &__root-icon {
  //     transform: none;
  //   }
  // }
}