$stacking-order: (
  item: 10,
  focused: 20,
);

$plain-horizontal-spacing: spacing(tight);
$item-spacing: spacing(tight);

.ButtonGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: (-1 * $item-spacing);
  margin-left: (-1 * $item-spacing);
}

.Item {
  margin-top: $item-spacing;
  margin-left: $item-spacing;
}

.Item-plain {
  &:not(:first-child) {
    margin-left: $item-spacing + $plain-horizontal-spacing;
  }

  &:not(:last-child) {
    margin-right: $plain-horizontal-spacing;
  }
}

.segmented {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 0;
  margin-left: 0;

  // This is a violation of our component model, but it’s the cleanest
  // way to remove the border radii on connected elements.
  .Item {
    position: relative;
    z-index: z-index(item, $stacking-order);
    margin-top: 0;
    margin-left: 0;

    &:not(:first-child) {
      margin-left: -(border-width());
    }

    // stylelint-disable-next-line selector-max-combinators
    > * {
      border-radius: 0;
    }

    // stylelint-disable-next-line selector-max-combinators
    &:first-child > * {
      border-top-left-radius: border-radius();
      border-bottom-left-radius: border-radius();
    }

    // stylelint-disable-next-line selector-max-combinators
    &:last-child > * {
      border-top-right-radius: border-radius();
      border-bottom-right-radius: border-radius();
    }
  }

  .Item-focused {
    z-index: z-index(focused, $stacking-order);
  }
}

.fullWidth {
  .Item {
    flex: 1 1 auto;

    // stylelint-disable-next-line selector-max-combinators
    > * {
      @include button-full-width;
    }
  }
}

.connectedTop {
  .Item {
    // stylelint-disable-next-line selector-max-combinators
    &:first-child > * {
      border-top-left-radius: 0;
    }

    // stylelint-disable-next-line selector-max-combinators
    &:last-child > * {
      border-top-right-radius: 0;
    }
  }
}