@import "../../styles/index.scss";

/* ================= Group ================= */
.ia-styles.ia-buttonGroup {
  height: $BigComponent;
  text-transform: none;
  color: #505c75;
  font-family: $fontFamily;
  font-weight: $normalFontWeight;
  font-size: $normalFontSize;

  &.ia-buttonGroup-disabled {
    color: $lightGrayColor;
    background-color: $disabledSecondaryBg;
    border-color: $disabledSecondaryBorder;
  }
}

/* ================= Buttons (base) ================= */
.ia-styles.ia-buttonGroupButton {
  font-family: $fontFamily;
  text-transform: none;
  padding: 0 12px;
  background: $whiteColor;

  /* single outer frame — no inner separators */
  border: 1px solid $deactivateColor;
  border-right: 0;
  border-radius: 0;

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

  /* restore only the very outer right edge */
  &:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: 1px solid $deactivateColor;
  }

  &.ia-buttonGroupButton-withIcon {
    display: flex;
    gap: 2px;
  }

  @include focus-visible-ring;
  @include focus-visible-disabled;

  &:focus-visible {
    z-index: 3;
  }

  &.Mui-focusVisible {
    background-color: $whiteColor;
  }

  &.ia-buttonGroupButton-selected.Mui-focusVisible {
    background-color: $lightBlueColor;
  }

  &:hover {
    color: $primaryColor;
    background: $whiteColor;
  }

  /* disabled button still follows the no-separator rule */
  &.ia-buttonGroupButton-disabled {
    background: $disabledSecondaryBg;
    border-color: $disabledSecondaryBorder;
    color: $lightGrayColor;

    &:last-child {
      border-right: 1px solid $disabledSecondaryBorder;
    }
  }
}

/* ================= Selected state ================= */
/* full 4-side primary border and overlap left by 1px to hide any seam */
.ia-styles.ia-buttonGroupButton.ia-buttonGroupButton-selected {
  position: relative;
  z-index: 1;
  background: $lightBlueColor;
  color: $primaryColor;

  border-color: $primaryColor;
  border-right: 1px solid $primaryColor;
  margin-left: -1px;
  border: 1px solid $primaryColor;

  /* first chip can’t overlap left */
  &:first-child {
    margin-left: 0;
  }
}

/* hide the neighbour’s left edge (extra safety) */
.ia-styles.ia-buttonGroupButton.ia-buttonGroupButton-selected
  + .ia-buttonGroupButton {
  border-left: transparent !important;
}

/* when selected is the last chip, keep its outer right edge in primary */
.ia-styles.ia-buttonGroupButton.ia-buttonGroupButton-selected:last-child {
  border-right-color: $primaryColor !important;
}

/* guard against any old rules that might kill the selected right edge */
.ia-buttonGroupButton-selected.ia-buttonGroupButton {
  border-right-color: $primaryColor !important;
}

/* 🔑 override: when group is disabled, selected should not force primary */
.ia-buttonGroup-disabled .ia-buttonGroupButton-selected {
  border-color: $disabledSecondaryBorder !important;
  background: $disabledSecondaryBg !important;
  color: $lightGrayColor !important;
}

.ia-styles.ia-buttonGroupButton {
  border: 1px solid $deactivateColor;
  margin-left: -1px;
  position: relative;
  z-index: 1;

  &:first-child {
    margin-left: 0;
  }

  &.ia-buttonGroupButton-selected {
    z-index: 2; // selected button
  }
}
