.segmented-toggle-icon {
  &__tooltip {
    flex-grow: 1;
  }

  &__tooltip [data-hook='popover-element'] {
    flex-grow: 1;
  }
}

.segmented-toggle-icon {
  width: 100%;
  padding: var(--wds-segmented-toggle-icononly-padding-vertical-medium, var(--wds-space-100, 6px)) var(--wds-segmented-toggle-icononly-padding-horizontal-medium, var(--wds-space-100, 6px));
  height: 100%;

  &:not(#{&}--selected) {
    border-color: transparent;
  }

  &--size-small,
  &--size-tiny {
    padding: var(--wds-segmented-toggle-icononly-padding-vertical-small, var(--wds-space-100, 6px)) var(--wds-segmented-toggle-icononly-padding-horizontal-small, var(--wds-space-100, 6px));
  }

  &#{&}:focus-visible {
    position: static;
  }

  &#{&}:focus-visible::before,
  &#{&}:focus-visible::after {
    top: calc(var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-100, 1px)) * -1);
    right: calc(var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-100, 1px)) * -1);
    bottom: calc(var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-100, 1px)) * -1);
    left: calc(var(--wds-segmented-toggle-border-width-default, var(--wds-border-width-100, 1px)) * -1);
    z-index: 10;
    border-radius: var(--wds-segmented-toggle-border-radius-medium, var(--wds-border-radius-300, 6px));
  }

  &#{&}--size-small:focus-visible::before,
  &#{&}--size-tiny:focus-visible::before,
  &#{&}--size-small:focus-visible::after,
  &#{&}--size-tiny:focus-visible::after {
    border-radius: var(--wds-segmented-toggle-border-radius-small, var(--wds-border-radius-300, 6px));
  }

  &__text-wrapper {
    padding: 12px 24px;
    text-align: center;
    color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
  }
}