.bui-calendar {
  --padding: var(--bui-calendar-padding, 6px 12px 7px);
  --week-height: var(--bui-calendar-week-height, 30px);
  --handler-height: var(--bui-calendar-handler-height, 28px);
  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
  --day-box-height: var(--bui-calendar-day-box-height, 30px);
  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
  --middle-color: var(--bui-calendar-middle-color, #000);
  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bui-color-bg-view);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: var(--padding);
  font-family: var(--bui-font-family);
}
.bui-calendar-week {
  height: var(--week-height);
  font-size: var(--bui-text-size-2);
  font-weight: var(--bui-font-weight-medium);
  color: var(--bui-color-fg-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bui-calendar-week-item {
  width: 14.28%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bui-calendar-week-item:nth-child(1),
.bui-calendar-week-item:nth-child(7) {
  color: var(--bui-color-primary);
}
.bui-calendar-handler {
  height: var(--handler-height);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--handler-margin-bottom);
}
.bui-calendar-handler-text {
  width: var(--handler-text-width);
  font-size: var(--bui-title-size-3);
  font-weight: var(--bui-font-weight-medium);
  text-align: center;
}
.bui-calendar-handler-btn {
  font-size: 16px;
  height: var(--handler-btn-height);
  width: var(--handler-btn-width);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bui-calendar-handler-btn-icon {
  font-size: var(--handler-btn-icon-font-size);
}
.bui-calendar-month {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--bui-spacing-sm);
}
.bui-calendar-day-box {
  width: 14.28%;
  height: var(--day-box-height);
  margin-bottom: var(--day-box-margin-bottom);
}
.bui-calendar-highlight-day .bui-calendar-day {
  color: var(--bui-color-primary);
}
.bui-calendar-day {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bui-shape-radius-default);
  font-size: var(--bui-title-size-4);
  font-weight: var(--bui-font-weight-medium);
  color: var(--bui-color-fg-default);
  cursor: pointer;
}
.bui-calendar-day.bui-calendar-disabled {
  color: var(--day-disabled-color);
}
.bui-calendar-today {
  color: var(--bui-color-primary);
}
.bui-calendar-middle {
  color: var(--middle-color);
  border-radius: 0;
  background-color: var(--middle-background-color);
}
.bui-calendar-start {
  color: var(--range-both-ends-color);
  background-color: var(--range-both-ends-background-color);
}
.bui-calendar-range {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bui-calendar-end {
  color: var(--range-both-ends-color);
  background-color: var(--range-both-ends-background-color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}