.yc-calendar {
  border: 1px solid var(--color-neutral-3);
  display: flex;
  flex-direction: column;

  .yc-calendar-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    .yc-calendar-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      .yc-calendar-header-icon {
        font-size: 12px;
      }
      .yc-calendar-header-value {
        color: var(--color-text-1);
        font-weight: 500;
        font-size: 20px;
      }
    }
  }
}
// calendar-month
.yc-calendar-month {
  display: flex;
  flex-direction: column;
  .yc-calendar-week-list {
    height: 55px;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--color-neutral-3);
    display: flex;

    .yc-calendar-week-list-item {
      flex: 1;
      padding: 20px 16px;
      color: var(--color-text-3);
      text-align: left;
      font-size: 14px;
    }
  }
  .yc-calendar-month-cell-body {
    display: flex;
    flex-direction: column;
    .yc-calendar-month-row {
      display: flex;
      height: 100px;
      &:not(:last-child) {
        border-bottom: 1px solid var(--color-neutral-3);
      }
      .yc-calendar-cell {
        width: calc(100% / 7);
        &:not(:last-child) {
          border-right: 1px solid var(--color-neutral-3);
        }
        .yc-calendar-date {
          width: 100%;
          height: 100%;
          padding: 10px;
          cursor: pointer;
          .yc-calendar-date-value {
            color: var(--color-text-4);
            font-weight: 500;
            font-size: 16px;
            .yc-calendar-date-circle {
              width: 28px;
              height: 28px;
              border-radius: var(--border-radius-circle);
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
      .yc-calendar-cell-in-view {
        .yc-calendar-date {
          .yc-calendar-date-value {
            color: var(--color-text-1);
          }
        }
      }
      // today
      .yc-calendar-cell-today {
        .yc-calendar-date {
          .yc-calendar-date-value {
            .yc-calendar-date-circle {
              border: 1px solid rgb(var(--primary-6));
            }
          }
        }
      }
      // selected
      .yc-calendar-cell-selected {
        .yc-calendar-date {
          .yc-calendar-date-value {
            .yc-calendar-date-circle {
              border: 1px solid rgb(var(--primary-6));
              color: var(--color-white);
              background-color: rgb(var(--primary-6));
            }
          }
        }
      }
    }
  }
}
// small
.yc-calendar-month {
  &.yc-calendar-month-small {
    border: none;
    .yc-calendar-week-list {
      height: 24px;
      border: none;
      .yc-calendar-week-list-item {
        flex: 1;
        flex-shrink: 0;
        padding: 6px;
      }
    }
    .yc-calendar-month-cell-body {
      .yc-calendar-month-row {
        height: 26px;
        border: none;
        .yc-calendar-cell {
          flex: 1;
          flex-shrink: 0;
          border: none;
          .yc-calendar-date {
            padding: 2px;
            .yc-calendar-date-value {
              font-size: 14px;
              .yc-calendar-date-circle {
                width: 22px;
                height: 22px;
              }
            }
          }
        }
      }
    }
  }
}
// calendar-year
.yc-calendar-mode-year {
  padding: 12px;
  min-width: 875px;
  .yc-calendar-year-row {
    display: flex;
    &:not(:last-child) {
      border-bottom: 1px solid var(--color-neutral-3);
    }
    .yc-calendar-year-cell {
      flex-shrink: 0;
      flex: 1;
      padding: 20px 8px;
      &:not(:last-child) {
        border-right: 1px solid var(--color-neutral-3);
      }
      .yc-calendar-year-cell-title {
        padding: 10px 6px;
        color: var(--color-text-1);
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
}
