@import 'themes/default';

.Segmented-Controls {
  --focus--offset: calc(-1 * var(--focus--width));

  align-items: stretch;
  background-color: var(--color--invert);
  border-radius: var(--radius--med);
  box-shadow: var(--shadow--s);
  display: flex;
  justify-content: center;
}

.Button__Control {
  background-color: var(--color--invert);
  border-radius: 0;
  border-right: 1px solid var(--color--gray-5);
  color: var(--color--gray-2);
  flex: 1 0 0;
  font-weight: var(--font-weight--bold);
  margin: 0;
  padding: 0.75em 0;
  text-align: center;
  transition-property: background, color;
  transition-duration: var(--timing--fade);
  width: 100%;

  &:hover,
  &:focus-visible {
    background-color: var(--color--invert);
    color: var(--color--main);
  }

  &--active,
  &--active:hover,
  &--active:focus-visible {
    background-color: var(--color--main);
    color: var(--color--invert);
  }

  &:first-child {
    border-top-left-radius: var(--radius--med);
    border-bottom-left-radius: var(--radius--med);
  }

  &:last-child {
    border-right: 0;
    border-top-right-radius: var(--radius--med);
    border-bottom-right-radius: var(--radius--med);
  }
}

// This is a fallback for when the ButtonControl elements
// are wrapped in another element, such as a TooltipContainer
.Segmented-Controls {
  *:first-child {
    .Button__Control {
      border-top-left-radius: var(--radius--med);
      border-bottom-left-radius: var(--radius--med);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  *:last-child {
    .Button__Control {
      border-right: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--radius--med);
      border-bottom-right-radius: var(--radius--med);
    }
  }
}