.MYUI-ButtonGroup {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--PADDING_bottom_or_top) var(--PADDING_left_or_right) var(--PADDING_bottom_or_top) var(--PADDING_left_or_right);
  /* [Примечание 2] Чтобы блок не выходил за границы контейнера (связано с [Примечание 4]) */
}

.MYUI-ButtonGroup--stretched {
  display: flex;
  width: 100%;
}

.MYUI-ButtonGroup--mode-vertical {
  flex-direction: column;
}

.MYUI-ButtonGroup--mode-horizontal {
  flex-direction: row;
}

.MYUI-ButtonGroup--mode-vertical[data-separator="primary"]>*:not(:first-child) {
  border-top: solid 1px rgba(var(--SEPARATOR_background_primary));
  padding-top: 10px;
}

.MYUI-ButtonGroup--mode-horizontal[data-separator="primary"]>*:not(:first-child) {
  border-left: solid 1px rgba(var(--SEPARATOR_background_primary));
}

.MYUI-ButtonGroup--mode-horizontal[data-separator="secondary"]>*:not(:first-child) {
  border-left: solid 1px rgba(var(--SEPARATOR_background_secondary));
}

.MYUI-ButtonGroup--mode-vertical.MYUI-ButtonGroup--gap-space>*:not(:first-child) {
  margin-top: var(--margin--button-group__gap-space);
}

.MYUI-ButtonGroup--mode-vertical.MYUI-ButtonGroup--gap-s>*:not(:first-child) {
  margin-top: var(--margin--button-group__gap-small);
}

.MYUI-ButtonGroup--mode-vertical.MYUI-ButtonGroup--gap-m>*:not(:first-child) {
  margin-top: var(--margin--button-group__gap-medium);
}

/* "gap" для mode="horizontal" */
.MYUI-ButtonGroup--mode-horizontal>*:not(.MYUI-ButtonGroup) {
  /**
   * [Примечание 4]
   *
   * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
   * из-за чего элементы при переполнении будут выходить за границы контейнера.
   *
   * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
   */
  min-width: 0;
}

.MYUI-ButtonGroup--mode-horizontal.MYUI-ButtonGroup--gap-space>*:not(:last-child) {
  margin-right: var(--margin--button-group__gap-space);
}

.MYUI-ButtonGroup--mode-horizontal.MYUI-ButtonGroup--gap-s>*:not(:last-child) {
  margin-right: var(--margin--button-group__gap-small);
}

.MYUI-ButtonGroup--mode-horizontal.MYUI-ButtonGroup--gap-m>*:not(:last-child) {
  margin-right: var(--margin--button-group__gap-medium);
}

/* stylelint-enable vkui/atomic */

.MYUI-ButtonGroup--align-left {
  align-items: flex-start;
}

.MYUI-ButtonGroup--align-center {
  align-items: center;
}

.MYUI-ButtonGroup--align-right {
  align-items: flex-end;
}