/**
 * HUD 抽屉「桶按钮组」共享样式（顶栏快筛与右侧资源竖栏共用）：
 * - 方角按钮 + 6px 小圆角，与资源竖栏一致；min-height 32px；
 * - 不展示色点（与竖栏一致，仅靠选中底色区分）；
 * - 选中态统一用主题主色（与 antd primary 同源），避免预约/支付/资源各一套色；
 * - 未选中保持 ghost 灰边框，hover 略加深边框，避免一排按钮全亮抢占注意力。
 */
.reservation-bucket-button-group {
  /**
   * 用 `inline-flex` 而不是 `flex`：组件本身是块级 `<div>`，
   * 在 inline Form 里如果用 `display: flex`，div 会以"块级"身份占满 Form.Item 的可用宽，
   * 多个桶组件就会各占一行；改为 inline-flex 后容器宽度按内容收缩，
   * 配合外层 `<Space wrap>` 的 inline 布局可以让多组按钮并排。
   */
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;

  &__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    height: auto;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: var(--gray-700, #344054);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
  }

  &__item:hover:not(.reservation-bucket-button-group__item--checked) {
    border-color: #98a2b3;
  }

  &__item:focus-visible {
    outline: 2px solid var(--color-primary, #2e90fa);
    outline-offset: 1px;
  }

  &__item--checked {
    background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    border-color: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    color: var(--ant-color-text-light-solid, #fff);
    font-weight: 600;
  }

  &__dot {
    display: none;
  }

  &__label {
    white-space: nowrap;
  }
}