@import "../lib.less";
@import "./button-group.less";
@import "../variables/components/checkbox.less";
@import (reference) "../grouped-button.less";

.@{veui-prefix}-check-button-group {
  position: relative;
  button {
    &[ui~="s"],
    &[ui~="m"],
    &[ui~="l"] {
        &[ui~="normal"] {
            min-width: auto;
        }
    }
  }
  .@{veui-prefix}-button {
    &:extend(._veui-grouped-button all);
  }

  &-items {
    border-radius: inherit;
  }

  .@{veui-prefix}-button-selected + .@{veui-prefix}-button-selected {
    &::before {
        content: '';
        .absolute(-1px, _, -1px, -1px);
        width: 1px;
        background-color: @veui-color-brand-3;
    }
  }

  .@{veui-prefix}-button &-checkmark {
    @offset: @veui-spacing-unit;
    .absolute(@offset, @offset, _, _);
    .veui-icon-size(@veui-checkbox-strong-check-icon-size);
    margin: 0;
    color: @veui-checkbox-strong-check-icon-color;
    .@{veui-prefix}-icon:only-child {
        width: @veui-checkbox-strong-check-icon-width;
        height: @veui-checkbox-strong-check-icon-height;
        display: inherit;
    }
    & + .@{veui-prefix}-icon {
        &:last-child {
            margin-right: 0;
        }
    }
  }

  .@{veui-prefix}-button:hover &-checkmark,
  .@{veui-prefix}-button:active &-checkmark,
  .@{veui-prefix}-button[data-focus-visible-added] &-checkmark {
    color: @veui-checkbox-strong-check-icon-color-checked;
  }

  .@{veui-prefix}-button-selected &-checkmark {
    color: @veui-checkbox-strong-check-icon-color-checked;
  }

  .@{veui-prefix}-disabled &-checkmark {
    color: @veui-checkbox-strong-check-icon-color-disabled;
  }

  .@{veui-prefix}-button-selected.@{veui-prefix}-disabled &-checkmark {
    color: @veui-checkbox-strong-check-icon-color-checked-disabled;
  }

  &[ui~="strong"] .@{veui-prefix}-button.@{veui-prefix}-button-selected {
    background-color: @veui-checkbox-background-color;
    color: @veui-button-font-color-normal-hover;
    &.veui-disabled {
      background-color: @veui-checkbox-backgroung-color-checked-disabled;
      color: @veui-checkbox-font-color-checked-disabled;
    }
  }
}