@use "design";
@use "m";

$border-radius: 5px;

.toggleBarField {
  &.withPadding {
    padding: 20px design.$card-h-padding 8px design.$card-h-padding;
  }

  user-select: none;
}

.toggleBar {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;

  background-color: design.$neutral-90;
  border-radius: $border-radius;
}

.toggleBarTitle {
  display: flex;
  align-items: center; // Just in case the text gets long enough to wrap
  flex-grow: 1;
  text-align: center;
  justify-content: center;

  cursor: pointer;

  @include design.font-small;

  padding: 7px 0;

  &:focus-visible {
    @include m.focusRingWithSpace;
  }

  &:first-child {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  &.selected {
    background-color: design.$color-inverse-surface;
    color: design.$color-inverse-on-surface;
    border-radius: $border-radius;
  }
}