$selected-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-segmented-toggle-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-segmented-toggle-inner-shadow-fill-primary, transparent) inset;

.segmented-toggle {
  display: flex;
  background: var(--wds-segmented-toggle-fill, var(--wsr-color-D80, #ffffff));
  border: var(--wds-segmented-toggle-border-width, 1px) solid var(--wds-segmented-toggle-border-color, #d6e6fe);
  border-radius: var(--wds-segmented-toggle-container-border-radius-medium, 6px);
  height: calc(var(--wds-segmented-toggle-size-medium, 36px) - var(--wds-segmented-toggle-border-width, 1px) * 2);
  box-shadow: var(--wds-inner-shadow-x-input, 0) var(--wds-inner-shadow-y-input, 0) var(--wds-inner-shadow-blur-input, 0) 0 var(--wds-inner-shadow-fill-input, var(--wsr-color-B40, #d6e6fe)) inset;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  padding: var(--wds-segmented-toggle-padding-container, 0);

  &--size-small {
    border-radius: var(--wds-segmented-toggle-container-border-radius-small, 6px);
    height: calc(var(--wds-segmented-toggle-size-small, 30px) - var(--wds-segmented-toggle-border-width, 1px) * 2);
  }

  &--size-tiny {
    border-radius: var(--wds-segmented-toggle-container-border-radius-small, 6px);
    height: calc(var(--wds-segmented-toggle-size-tiny, 22px) - var(--wds-segmented-toggle-border-width, 1px) * 2);
  }

  &--full-width {
    width: 100%;
  }

  &--disabled {
    border: var(--wds-segmented-toggle-border-width-default, 1px) solid var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
  }

  [data-hook='popover-element'] {
    height: 100%;
  }

  &__item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-grow: 1;
    color: var(--wds-segmented-toggle-value-fill-default, var(--wsr-color-D10, #000624));
    cursor: pointer;
    background-color: var(--wds-segmented-toggle-fill, var(--wsr-color-D80, #ffffff));
    border: var(--wds-segmented-toggle-border-width-selected, 2px) solid transparent;
    /**
    * When parent and child elements have the same border-radius, it creates a gap between them.
    * This solution removes the space by subtracting the parent's border width from the child's border-radius,
    * ensuring perfect alignment between the parent and child rounded corners.
    * https://interactively.info/article/perfect-nested-rounded-corners
    */
    border-radius: calc(var(--wds-segmented-toggle-border-radius-medium, 6px) - var(--wds-segmented-toggle-border-width, 1px));
    margin: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;

    &--size-tiny {
      border-radius: calc(var(--wds-segmented-toggle-border-radius-tiny, 6px) - var(--wds-segmented-toggle-border-width, 1px));
    }

    &--size-small {
      border-radius: calc(var(--wds-segmented-toggle-border-radius-small, 6px) - var(--wds-segmented-toggle-border-width, 1px));
    }

    &:disabled {
      color: var(--wds-segmented-toggle-value-fill-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))));
      background-color: var(--wds-segmented-toggle-fill-disabled, transparent);
      cursor: default;
    }

    &--selected:not(:disabled) {
      color: var(--wds-segmented-toggle-value-fill-selected, var(--wsr-color-D10, #000624));
      box-shadow: $selected-shadow;
      border: var(--wds-segmented-toggle-border-width-selected, 2px) solid var(--wds-segmented-toggle-border-color-selected, #116dff);
      z-index: 2;
    }

    &--selected:disabled {
      color: var(--wds-segmented-toggle-value-fill-selected-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
      background-color: var(--wds-segmented-toggle-fill-selected-disabled, transparent);
      border: var(--wds-segmented-toggle-border-width-default, 1px) solid var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
      /** Makes selected item border look the same width. */
      box-shadow:
        0 calc(-1 * var(--wds-segmented-toggle-border-width-default, 1px)) 0 0 var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))),
        var(--wds-segmented-toggle-border-width-default, 1px) 0 0 0 var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))),
        0 var(--wds-segmented-toggle-border-width-default, 1px) 0 0 var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))),
        calc(-1 * var(--wds-segmented-toggle-border-width-default, 1px)) 0 0 0 var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
      z-index: 2;
    }

    &--selected:not(:hover):not(:disabled) {
      color: var(--wds-segmented-toggle-value-fill-selected, var(--wsr-color-D10, #000624));
      background-color: var(--wds-segmented-toggle-fill-selected, var(--wsr-color-D80, #ffffff));
    }

    @media (hover: hover) {
      &:not(:disabled):hover {
        color: var(--wds-segmented-toggle-value-fill-hover, var(--wsr-color-D10, #000624));
        background-color: var(--wds-segmented-toggle-fill-hover, var(--wsr-color-B50, #e7f0ff));
        box-shadow: 0 0 0 var(--wds-segmented-toggle-border-width, 1px) var(--wds-segmented-toggle-border-hover, var(--wsr-color-B10, #116dff));
        z-index: 2;
        cursor: pointer;
      }

      &--selected:not(:disabled):hover {
        color: var(--wds-segmented-toggle-value-fill-selected, var(--wsr-color-D10, #000624));
        background-color: var(--wds-segmented-toggle-fill-selected, var(--wsr-color-D80, #ffffff));
        box-shadow: $selected-shadow;
        z-index: 2;
        cursor: pointer;
      }
    }
  }

  &__divider {
    flex-basis: auto;
    width: var(--wds-segmented-toggle-border-width, 1px);
    min-width: var(--wds-segmented-toggle-border-width, 1px);
    background-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe));

    &--disabled {
      background-color: var(--wds-color-border-standard-secondary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)));
    }

    &--transparent {
      background-color: transparent;
    }
  }
}