@import "../lib.less";
@import "../variables/components/button.less";

.@{veui-prefix}-button-group {
  display: inline-flex;
  border-radius: @veui-button-border-radius-l;

  &-items {
    border-radius: inherit;
  }

  .@{veui-prefix}-button {
    position: relative;
    flex: 1 1 0;
    margin-left: -1px;
    border-radius: 0;

    &:first-child {
      margin-left: 0;
      .border-left-radius(inherit);
    }

    &:last-child {
      .border-right-radius(inherit);
    }

    &:hover,
    &[data-focus-visible-added] {
      z-index: 1;
    }
  }

  .@{veui-prefix}-button[ui~="primary"]
    + .@{veui-prefix}-button[ui~="primary"] {
    &::before {
      content: "";
      .absolute(-1px, _, -1px, -1px);
      width: 1px;
      background-color: @veui-button-group-separator-color-primary;
    }

    &.focus-visible::before {
      background-color: transparent;
    }

    &.@{veui-prefix}-disabled::before {
      background-color: @veui-button-group-separator-color-primary-disabled;
    }
  }
}