/* SegmentedControl */

.SegmentedControl {
  display: inline-flex;
  list-style: none;
  background-color: var(--color-segmented-control-bg);
  border-radius: var(--yattho-borderRadius-medium, 6px);
  box-shadow: var(--yattho-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
}

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

  /* Selected ---------------------------------------- */
}

.SegmentedControl-item.SegmentedControl-item--selected {
    background-color: var(--color-btn-bg);
    border-color: var(--color-segmented-control-button-selected-border);
  }

.SegmentedControl-item.SegmentedControl-item--selected .Button {
      font-weight: var(--base-text-weight-semibold, 600);
    }

.SegmentedControl-item.SegmentedControl-item--selected .Button:hover {
        background-color: transparent;
      }

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

.SegmentedControl-item.SegmentedControl-item--selected + .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 */

.SegmentedControl-item .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 */

.SegmentedControl-item::before {
    position: absolute;
    inset: 0 0 0 -1px;
    margin-top: var(--yattho-control-medium-paddingBlock, 6px);
    margin-bottom: var(--yattho-control-medium-paddingBlock, 6px);
    content: '';
    border-left: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
  }

/* Button ----------------------------------------- */

.SegmentedControl-item .Button {
    border: 0;
    font-weight: var(--base-text-weight-normal, 400);
    transition: none;
    color: var(--color-btn-text);
  }

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

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

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

.SegmentedControl-item .Button--small.Button--iconOnly::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--yattho-control-medium-size, 32px);
  content: "";
  transform: translateX(-50%) translateY(-50%);
  min-width: var(--yattho-control-medium-size, 32px);
}

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

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

.SegmentedControl-item .Button--medium.Button--iconOnly::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--yattho-control-medium-size, 32px);
  content: "";
  transform: translateX(-50%) translateY(-50%);
  min-width: var(--yattho-control-medium-size, 32px);
}

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

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

.SegmentedControl-item .Button--large.Button--iconOnly::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--yattho-control-large-size, 40px);
  content: "";
  transform: translateX(-50%) translateY(-50%);
  min-width: var(--yattho-control-large-size, 40px);
}

.SegmentedControl-item .Button--iconOnly {
    padding: initial;
  }

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

/* fullWidth */

.SegmentedControl--fullWidth {
  display: flex;
}

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

/* is .Button-withTooltip used anywhere? can't find use of it */

.SegmentedControl--fullWidth .Button--iconOnly,
  .SegmentedControl--fullWidth .Button-withTooltip {
    width: 100%;
  }