@import "../../message/popover/popover.css";
@import "../../template/border/border.css";

.m-date-picker-active {
  --m-input-w: 244px;
  --m-color-disabled: #DBDADD;
  box-sizing: content-box;
  border: 3px double transparent;
  width: var(--m-input-w);
  height: 31px;
  line-height: 31px;
}

.m-date-picker-calendar {
  --m-date-picker-width: 243px;
  width: var(--m-date-picker-width);
  height: 208px;
  padding: 2px 0 5px;
}


.m-date-picker-span {
  font-size: 13px;
  line-height: 31px;
  margin: 0 10px;
}

.m-date-picker-placeholder {
  color: #757575;
}

.m-date-picker-calendar-columns {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  font-weight: 700;
}

.m-date-picker-calendar-column {
  width: calc(var(--m-date-picker-width) / 7);
  text-align: center;
  height: 25px;
  line-height: 25px;
}

.m-date-picker-calendar-column-year, .m-date-picker-calendar-column-month {
  font-size: 16px;
  width: calc(var(--m-date-picker-width) / 4);
  display: inline-block;
  text-align: center;
  height: 50px;
  line-height: 50px;

  &.m-date-picker-current {
    background-size: 50px 50px;
  }
}

.m-date-picker-not-current {
  color: #757575;
  font-weight: 400;
}

.m-date-picker-calendar-head {
  text-align: center;
  font-size: 20px;
  font-weight: 700;

  & > div {
    display: inline-block;
    margin: 0 2px;
  }
}

.m-date-picker-m-arrow {
  width: 10px;
  height: 14px;
  display: inline-block;
}

.m-date-picker-y-arrow {
  width: 12px;
  height: 14px;
  display: inline-block;
}

.m-date-picker-prev-arrow {
  background: url(./assets/calendar_month_prev.webp) no-repeat;
  background-size: 100%;
}

.m-date-picker-next-arrow {
  background: url(./assets/calendar_month_next.webp) no-repeat;
  background-size: 100%;
}

.m-date-picker-prev-year-arrow {
  background: url(./assets/calendar_year_prev.webp) no-repeat;
  background-size: 100%;
}

.m-date-picker-next-year-arrow {
  background: url(./assets/calendar_year_next.webp) no-repeat;
  background-size: 100%;
}

.m-date-picker-calendar-body {
  & .m-date-picker-calendar-column:hover {
    color: var(--m-color-main);
  }
}

.m-date-picker-current {
  background: url(./assets/circle.webp) no-repeat center;
  background-size: 23px 23px;
}

.m-date-picker .m-border-main {
  overflow: hidden;
  display: inline-flex;
}