/* SegmentedControl */

.SegmentedControl {
  display: inline-flex;
  list-style: none;
  background-color: var(--color-segmented-control-bg);
  border-radius: var(--borderRadius-medium, 6px);
}

.SegmentedControl-item {
  position: relative;
  display: inline-flex;
  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
  border-radius: var(--borderRadius-medium, 6px);
  padding: var(--control-xsmall-paddingInline-condensed, 4px);

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

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

      &: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, 600);
    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, 6px);
      margin-bottom: var(--control-medium-paddingBlock, 6px);
      content: '';
      border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
    }
  }

  /* Button ----------------------------------------- */
  & .Button {
    border: 0;
    font-weight: var(--base-text-weight-normal, 400);
    transition: none;
    color: var(--color-btn-text);

    &:focus-visible {
      outline-offset: calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px));
      border-radius: calc(var(--borderRadius-medium, 6px) - 5px);
    }
  }

  & .Button--small {
    height: calc(
      var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
        var(--borderWidth-thin, 1px) * 2
    );
    padding: 0
      calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px));

    &.Button--iconOnly {
      width: calc(
        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
          var(--borderWidth-thin, 1px) * 2
      );

      &::before {
        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
      }
    }
  }

  & .Button--medium {
    height: calc(
      var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
        var(--borderWidth-thin, 1px) * 2
    );
    padding: 0
      calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px));

    &.Button--iconOnly {
      width: calc(
        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
          var(--borderWidth-thin, 1px) * 2
      );

      &::before {
        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
      }
    }
  }

  & .Button--large {
    height: calc(
      var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
        var(--borderWidth-thin, 1px) * 2
    );
    padding: 0
      calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px));

    &.Button--iconOnly {
      width: calc(
        var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
          var(--borderWidth-thin, 1px) * 2
      );

      &::before {
        @mixin minTouchTarget var(--control-large-size, 40px), var(--control-large-size, 40px);
      }
    }
  }

  & .Button--iconOnly {
    padding: initial;
  }

  & .Button--invisible.Button--invisible-noVisuals .Button-label {
    color: var(--color-btn-text);
  }
}

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

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

  /* is .Button-withTooltip used anywhere? can't find use of it */
  & .Button--iconOnly,
  & .Button-withTooltip {
    width: 100%;
  }
}