/**
 * ToggleButtonGroup 组件样式 - 100% 一比一复刻 MUI
 * 对应 MUI: packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js
 */

/* =============================================
   Root 基础样式
   ============================================= */
.MuiToggleButtonGroup-root {
  display: inline-flex;
  border-radius: 4px;
  background-color: #fff;
}

/* =============================================
   布局
   ============================================= */
.MuiToggleButtonGroup-vertical {
  flex-direction: column;
}

.MuiToggleButtonGroup-fullWidth {
  width: 100%;
  display: flex;
}

/* =============================================
   子按钮间距处理
   ============================================= */
.MuiToggleButtonGroup-root > :not(:first-child) {
  margin-left: -1px;
}

.MuiToggleButtonGroup-vertical > :not(:first-child) {
  margin-top: -1px;
  margin-left: 0;
}

/* =============================================
   首尾按钮圆角处理
   ============================================= */
.MuiToggleButtonGroup-root > :first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.MuiToggleButtonGroup-root > :last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.MuiToggleButtonGroup-vertical > :first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.MuiToggleButtonGroup-vertical > :last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* =============================================
   中间按钮圆角处理
   ============================================= */
.MuiToggleButtonGroup-root > :not(:first-child):not(:last-child) {
  border-radius: 0;
}

.MuiToggleButtonGroup-vertical > :not(:first-child):not(:last-child) {
  border-radius: 0;
}