@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
$cn-ui-m-prefix: 'cn-ui-m';

$-calendar-title-font-size: $m-s-16;

.#{$hashClassName}.#{$cn-ui-m-prefix}-calendar {
  .#{$cn-ui-m-prefix}-calendar {
    &-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: $m-s-13 $m-s-12;
      a.#{$cn-ui-m-prefix}-calendar-arrow-button {
        padding: $m-s-4 $m-s-8;
        display: block;
        flex: none;
        svg {
          height: $m-s-16;
          color: $m-color-bg-darker1;
        }
        &.#{$cn-ui-m-prefix}-calendar-arrow-button-right {
          svg {
            transform: rotate(180deg);
          }
        }
      }
      .#{$cn-ui-m-prefix}-calendar-title {
        color: $m-color-text-title1;
        font-size: $-calendar-title-font-size;
        letter-spacing: 0;
        line-height: $-calendar-title-font-size;
        flex: auto;
        text-align: center;
      }
    }
    &-body {
      display: flex;
      flex-wrap: wrap;
    }

    &-cells {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: stretch;
      padding: $m-s-8 $m-s-8 $m-s-4;
    }
    &-cell {
      flex: none;
      box-sizing: border-box;
      width: calc(100% / 7);
      height: $m-s-48;
      margin-bottom: $m-s-4;
      padding: $m-s-2;
      color: $m-color-text;
      cursor: pointer;
      &-today {
        color: $m-color-primary;
        position: relative;
        &::before {
          content: ' ';
          width: $m-s-28;
          height: $m-s-28;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          border: 1px solid $m-color-secondary-lightest;
          z-index: 1;
        }
      }
      &-disabled {
        color: $m-color-text-disabled;
        .#{$cn-ui-m-prefix}-calendar-cell-bottom {
          color: $m-color-text-disabled;
        }
      }
      &-selected {
        position: relative;
        &::before {
          content: ' ';
          width: $m-s-28;
          height: $m-s-28;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: $m-color-secondary-lightest;
          z-index: 1;
        }
        &::after {
          content: ' ';
          width: 100%;
          height: $m-s-28;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          background: $m-color-secondary-lightest;
        }
        & {
          // background: $m-color-success-lightest;
          color: $m-color-bg-white;
        }
        & .#{$cn-ui-m-prefix}-calendar-cell-bottom {
          color: $m-color-bg-white;
        }
        &-begin {
          // border-top-left-radius: 50%;
          // border-bottom-left-radius: 50%;
          &::before {
            border-radius: 50%;
            // border-top-left-radius: 50%;
            // border-bottom-left-radius: 50%;
            background-color: $m-color-primary;
          }
          &::after {
            content: ' ';
            width: 50%;
            height: $m-s-28;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(0, -50%);
            background: $m-color-secondary-lightest;
          }
          color: $m-color-bg-white !important;
        }
        &-end {
          // border-top-right-radius: 50%;
          // border-bottom-right-radius: 50%;
          &::before {
            border-radius: 50%;
            // border-top-right-radius: 50%;
            // border-bottom-right-radius: 50%;
            background-color: $m-color-primary;
          }
          &::after {
            display: none;
          }
          color: $m-color-bg-white !important;
          &-range {
            &::after {
              display: block;
              content: ' ';
              width: 50%;
              height: $m-s-28;
              position: absolute;
              top: 50%;
              right: 50%;
              transform: translate(0, -50%);
              background: $m-color-secondary-lightest;
            }
          }
        }
      }

      &-selected {
        color: $m-color-text;
      }

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      &-top {
        position: relative;
        flex: none;
        z-index: 1;
        font-size: $-calendar-title-font-size;
        line-height: $m-s-20;
      }
      &-bottom {
        position: relative;
        flex: none;
        font-size: $m-s-10;
        height: $m-s-12;
        line-height: $m-s-12;
        z-index: 1;
        color: var(--#{$cn-ui-m-prefix}-color-weak);
      }
    }

    &-mark {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      // border-bottom: solid $m-s-1 var(--#{$cn-ui-m-prefix}-color-border);
      box-shadow: 0 $m-s-2 $m-s-4 0 rgba(0, 0, 0, 0.08);
      height: $m-s-40;
      box-sizing: border-box;
      font-size: $m-s-14;
      font-weight: $m-font-weight-medium;
      padding: 0 $m-s-8;
      &-cell {
        flex: 1;
        text-align: center;
      }
    }

    &-time {
      border-top: $m-s-1 solid $m-color-bg-disabled;
      padding: $m-s-12 $m-s-16;
    }
  }
}
/* prettier-ignore */
[dir=rtl] .#{$hashClassName}.#{$cn-ui-m-prefix}-calendar {
  .#{$cn-ui-m-prefix}-calendar {
    &-header {
      a.#{$cn-ui-m-prefix}-calendar-arrow-button {
        svg {
            transform: rotate(180deg);
          }
        &.#{$cn-ui-m-prefix}-calendar-arrow-button-right {
          svg {
            transform: rotate(0deg);
          }
        }
        
      }
    }
  }
}