/* SegmentedControl */

.SegmentedControl {
  --segmentedControl-item-padding: var(--control-small-paddingBlock);

  display: inline-flex;
  list-style: none;
  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
  border-radius: var(--borderRadius-medium);
}

.SegmentedControl--iconOnly {
  & .Button--iconOnly.Button--small,
  & .Button--iconOnly.Button--medium,
  & .Button--iconOnly.Button--large {
    width: 100%;
    padding-inline: 0 !important;
  }
}

/* sizes */

.SegmentedControl--small {
  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);

  & .SegmentedControl-item {
    height: var(--control-small-size);

    & .Button {
      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
    }
  }

  &.SegmentedControl--iconOnly {
    & .SegmentedControl-item {
      width: var(--control-small-size);
    }
  }
}

.SegmentedControl--medium {
  & .SegmentedControl-item {
    height: var(--control-medium-size);
  }

  &.SegmentedControl--iconOnly {
    & .SegmentedControl-item {
      width: var(--control-medium-size);
    }
  }
}

.SegmentedControl--large {
  & .SegmentedControl-item {
    height: var(--control-large-size);

    & .Button {
      padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));
    }
  }

  &.SegmentedControl--iconOnly {
    & .SegmentedControl-item {
      width: var(--control-large-size);
    }
  }
}

/* item */

.SegmentedControl-item {
  position: relative;
  display: inline-flex;
  justify-content: center;
  border: var(--borderWidth-thin) solid transparent;
  border-radius: var(--borderRadius-medium);
  height: var(--control-medium-size);
  padding: var(--segmentedControl-item-padding);

  & .Button-withTooltip {
    width: 100%;
  }

  /* button color overrides */
  & .Button--invisible {
    &:hover:not(:disabled) {
      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
    }

    &:active:not(:disabled) {
      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
    }
  }

  /* Selected ---------------------------------------- */
  &.SegmentedControl-item--selected {
    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));

    & .Button {
      font-weight: var(--base-text-weight-semibold);

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

    &::before {
      border-color: transparent !important;
    }

    & + .SegmentedControl-item::before {
      border-color: transparent;
    }
  }

  /* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
  & .Button-label[data-content]::before {
    display: block;
    height: 0;
    font-weight: var(--base-text-weight-semibold);
    visibility: hidden;
    content: attr(data-content);
  }

  /* Separator lines */
  &:not(:first-child) {
    &::before {
      position: absolute;
      inset: 0 0 0 -1px;
      margin-top: var(--control-medium-paddingBlock);
      margin-bottom: var(--control-medium-paddingBlock);
      content: '';
      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
    }
  }

  /* Button ----------------------------------------- */
  & .Button {
    height: 100%;
    width: 100%;
    border: 0;
    font-weight: var(--base-text-weight-normal);
    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));

    &:focus-visible {
      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
    }
  }

  & .Button--invisible.Button--invisible-noVisuals .Button-label {
    color: var(--button-default-fgColor-rest);
  }
}

/* fullWidth */
.SegmentedControl--fullWidth {
  display: flex;

  & .SegmentedControl-item {
    flex: 1;
    justify-content: center;
  }
}