@root-entry-name: 'default';
@import '~antd/es/style/themes/index.less';
@datepicker-custom-prefix-cls: ~'@{ant-prefix}-datepicker-custom';
.@{datepicker-custom-prefix-cls}-quarter-box {
  width: 230px;
}
.@{datepicker-custom-prefix-cls}-quarter {
  .@{ant-prefix}-picker-year-panel,
  .@{ant-prefix}-picker-quarter-panel {
    width: 230px;
  }
  // 修改选中的年份、季度背景颜⾊
  .@{ant-prefix}-picker-cell-selected {
    .@{ant-prefix}-picker-cell-inner {
      background: #1890ff;
    }
  }
  // 使⽤CSS改变季度选择器的内容
  .@{ant-prefix}-picker-quarter-panel {
    .@{ant-prefix}-picker-content {
      // 使季度选择器可以换⾏成两排
      tr {
        display: flex;
        flex-wrap: wrap;
      }
      // 控制按钮外层宽度，使器溢出换⾏
      td {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: 50px;
        padding: 20px;
      }
    }
    // 使before伪元素和按钮背景颜⾊⼀致
    .@{ant-prefix}-picker-cell-selected {
      &::before {
        color: #fff;
        background: #1890ff;
      }
    }
    // 控制伪元素所占宽度
    .@{ant-prefix}-picker-cell {
      &::before {
        right: auto;
        left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60%;
      }
    }
    // 隐藏季度选择器的按钮，⽤伪元素代替
    .@{ant-prefix}-picker-cell-inner {
      display: none;
    }
    // 根据title更换相应伪元素的content，使其代替原本的按钮
    .@{ant-prefix}-picker-cell[title$='-Q1'] {
      &::before {
        content: '第一季度';
      }
    }
    .@{ant-prefix}-picker-cell[title$='-Q2'] {
      &::before {
        content: '第二季度';
      }
    }
    .@{ant-prefix}-picker-cell[title$='-Q3'] {
      &::before {
        content: '第三季度';
      }
    }
    .@{ant-prefix}-picker-cell[title$='-Q4'] {
      &::before {
        content: '第四季度';
      }
    }
  }
}
