.am-calendar {
  background-color: #fff;
  padding-top: 10px;

  &-months {
    display: flex;
    box-sizing: border-box;
    padding: 0 26px;
    align-items: center;
    height: 28px;
  }

  &-prev-month,
  &-next-month {
    display: flex;
    width: 40px;
    font-size: 20px;
  }

  &-prev-month {
    justify-content: flex-start;
  }

  &-next-month {
    justify-content: flex-end;
  }

  &-arrow {
    height: 28px;
    width: 12px;
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/vYcMhkfyHRIOeVXWdcPe.png');
    background-size: 8px 14px;
    background-position: left center;
    background-repeat: no-repeat;
    &_year {
      width: 13px;
      background-repeat: repeat-x;
    }
  }

  &-arrow.next {
    transform: rotate(180deg);
  }

  &-selected-month {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  &-days {
    display: flex;
    padding: 14px 10px 9px;
    border-bottom: 1rpx solid #eee;
    height: 20px;
    line-height: 20px;
    box-sizing: content-box;
  }

  &-day {
    flex: 1;
    text-align: center;
    color: #333;
    font-size: 14px;
  }

  &-dates {
    display: flex;
    flex-direction: column;
  }

  &-week {
    margin-bottom: 17px;
    display: flex;
    flex-direction: row;
    padding: 0 10px;
  }

  &-week:first-child {
    margin-top: 12px;
  }

  &-date-wrap {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 42px;
    flex: 1;
  }

  &-date {
    text-align: center;
    height: 23px;
    line-height: 23px;
    font-size: 19px;
    /* stylelint-disable font-family-no-missing-generic-family-keyword */
    font-family: 'Helvetica';
    color: #333;
  }

  &-tag {
    position: absolute;
    top: 21px;
    width: 42px;
    overflow: hidden;
    text-overflow: hidden;
    white-space: nowrap;
    color: #f5a623;
    font-size: 10px;
    font-weight: 500;
  }

  &-today {
    color: #108ee9;
  }

  &-gray {
    color: #ccc;
  }

  &-selected &-block {
    position: absolute;
    left: ~"calc(50% - 21px)";
    top: ~"calc(50% - 10px)";
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: #309EF2;
    border-radius: 2px;
  }

  &-middle.is-range &-block {
    position: absolute;
    left: 0;
    top: ~"calc(50% - 10px)";
    transform: translateY(-50%);
    height: 42px;
    background: #309EF2;
    width: 100%;
    border-radius: 0;
  }

  &-start.is-range &-block {
    position: absolute;
    left: ~"calc(50% - 21px)";
    top: ~"calc(50% - 10px)";
    transform: translateY(-50%);
    width: 100%;
    height: 42px;
    background: #309EF2;
    border-radius: 2px 0 0 2px;
  }

  &-end.is-range &-block {
    position: absolute;
    left: 0;
    top: ~"calc(50% - 10px)";
    transform: translateY(-50%);
    width: ~"calc(50% + 21px)";
    height: 42px;
    background: #309EF2;
    border-radius: 0 2px 2px 0;
  }

  &-selected &-block.has-tag,
  &-start &-block.has-tag,
  &-middle &-block.has-tag,
  &-end &-block.has-tag {
    top: ~"calc(50% - 7px)";
  }

  &-selected &-date,
  &-start &-date,
  &-middle &-date,
  &-end &-date {
    position: relative;
    color: #fff;
  }

  &-selected &-tag,
  &-start &-tag,
  &-middle &-tag,
  &-end &-tag {
    color: #fff;
  }

  &-disable &-date {
    color: #999;
  }
}
