@use "../../../styles/colors.scss";
@use "../../../styles/spacing.scss";

.container {
  $round-radius: spacing.$spacing-8;

  display: flex;

  & > button {
    border-radius: 0;
  }

  &.round button {
    &:first-child {
      border-radius: $round-radius 0 0 $round-radius;
    }

    &:last-child {
      border-radius: 0 $round-radius $round-radius 0;
    }
  }

  &.primary {
    --Button-bg: var(--SegmentedControlGroup-bg, #{colors.$altblack-80});
    --Button-fg: var(--SegmentedControlGroup-fg, white);
    --Button-border: var(--SegmentedControlGroup-border, var(--Button-bg));
    --Button-active-bg: var(--SegmentedControlGroup-active-bg, #{colors.$altblack-100});
    --Button-active-fg: var(--SegmentedControlGroup-active-fg, white);
    --Button-active-border: var(--SegmentedControlGroup-active-border, var(--Button-active-bg));
    --Button-hover-bg: var(--SegmentedControlGroup-hover-bg, var(--SegmentedControlGroup-bg, #{colors.$altblack-70}));
    --Button-hover-fg: var(--SegmentedControlGroup-hover-fg, var(--Button-fg));
    --Button-hover-border: var(--SegmentedControlGroup-hover-border, var(--SegmentedControlGroup-border, var(--Button-hover-bg)));
    --Button-disabled-bg: var(--SegmentedControlGroup-disabled-bg, #{colors.$gray-20});
    --Button-disabled-fg: var(--SegmentedControlGroup-disabled-fg, white);
    --Button-disabled-border: var(--SegmentedControlGroup-disabled-border, var(--Button-disabled-bg));

    gap: 2px;
  }

  &.secondary {
    --Button-bg: var(--SegmentedControlGroup-bg, transparent);
    --Button-fg: var(--SegmentedControlGroup-fg, #{colors.$altblack-80});
    --Button-border: var(--SegmentedControlGroup-border, #{colors.$altblack-80});
    --Button-active-bg: var(--SegmentedControlGroup-active-bg, #{colors.$altblack-100});
    --Button-active-fg: var(--SegmentedControlGroup-active-fg, white);
    --Button-active-border: var(--SegmentedControlGroup-active-border, var(--Button-active-bg));
    --Button-hover-bg: var(--SegmentedControlGroup-hover-bg, var(--SegmentedControlGroup-bg, transparent));
    --Button-hover-fg: var(--SegmentedControlGroup-hover-fg, #{colors.$altblack-70});
    --Button-hover-border: var(--SegmentedControlGroup-hover-border, var(--Button-border));
    --Button-disabled-bg: var(--SegmentedControlGroup-disabled-bg, transparent);
    --Button-disabled-fg: var(--SegmentedControlGroup-disabled-fg, #{colors.$gray-20});
    --Button-disabled-border: var(--SegmentedControlGroup-disabled-border, var(--Button-disabled-fg));

    & > button {
      border-width: 1px;
    }

    & > button:not(:first-child) {
      border-left-width: 0;
    }
  }
}