@import "../lib.less";

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

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

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

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

    &[data-focus-visible-added] {
      z-index: 2;
    }

    &.@{veui-prefix}-disabled {
      z-index: 0;
    }
  }

  &-disabled .@{veui-prefix}-button.@{veui-prefix}-disabled {
    position: relative;
  }

  &[ui~="xs"] {
    border-radius: @dls-button-border-radius-xs;
  }

  &[ui~="s"] {
    border-radius: @dls-button-border-radius-s;
  }

  &[ui~="m"] {
    border-radius: @dls-button-border-radius-m;
  }

  &[ui~="l"] {
    border-radius: @dls-button-border-radius-l;
  }

  &[ui~="xl"] {
    border-radius: @dls-button-border-radius-xl;
  }

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

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

  .@{veui-prefix}-button[ui~="primary"]
  + .@{veui-prefix}-button[ui~="primary"] {
    &::before {
      background-color: fade(@dls-button-font-color-primary, percentage(@dls-button-group-separator-opacity));
    }

    &.@{veui-prefix}-disabled::before {
      background-color: fade(@dls-button-font-color-primary-disabled, percentage(@dls-button-group-separator-opacity));
    }
  }

  .@{veui-prefix}-button[ui~="normal"]
  + .@{veui-prefix}-button[ui~="normal"] {
    &::before {
      background-color: fade(@dls-button-font-color-normal, percentage(@dls-button-group-separator-opacity));
    }

    &.@{veui-prefix}-disabled::before {
      background-color: fade(@dls-button-font-color-normal-disabled, percentage(@dls-button-group-separator-opacity));
    }
  }

  &[ui~="s"] .@{veui-prefix}-button {
    &:first-child {
      .border-left-radius(@dls-button-border-radius-s);
    }

    &:last-child {
      .border-right-radius(@dls-button-border-radius-s);
    }
  }
}