.adm-calendar-picker,
.adm-calendar-picker-view,
.adm-calendar-picker-popup {
  & &-title {
    flex: auto;
    font-size: var(--adm-font-size-10);
  }

  & &-header {
    padding: 12px;
    border-bottom: 1px solid var(--adm-color-border);

    .adm-calendar-picker-view-title {
      text-align: center;
    }
  }

  & &-body {
    height: 64vh;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .adm-calendar-picker-view-title {
      position: sticky;
      top: 0;
      padding: 8px 20px;
      background-color: var(--adm-color-box);
    }
  }

  & &-footer {
    &-bottom {
      padding: 0 20px 16px;
    }

    .adm-divider {
      margin-top: 0;
    }

    .adm-button {
      width: 100%;
    }
  }

  &-cells {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    padding: 4px 8px;
  }

  &-cell {
    flex: none;
    box-sizing: border-box;
    width: calc(100% / 7);
    min-height: 55px;
    margin-bottom: 4px;
    padding: 2px;
    color: var(--adm-color-text);
    cursor: pointer;

    &&-today {
      color: var(--adm-color-primary);
    }

    &&-disabled {
      color: var(--adm-color-light);

      .adm-calendar-picker-view-cell-top,
      .adm-calendar-picker-view-cell-bottom {
        color: var(--adm-color-light);
      }
    }

    &&-selected {
      && {
        background: rgba(22, 119, 255, 10%);
        color: var(--adm-color-text);
      }

      & .adm-calendar-picker-view-cell-top,
      & .adm-calendar-picker-view-cell-bottom {
        color: var(--adm-color-white);
      }

      &&-begin {
        background: var(--adm-color-primary);
        color: var(--adm-color-white);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      &&-end {
        background: var(--adm-color-primary);
        color: var(--adm-color-white);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }

    &&-disabled&&-selected {
      color: var(--adm-color-light);
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & &-date {
      flex: none;
      line-height: 22px;
      font-size: var(--adm-font-size-8);
    }

    & &-top,
    & &-bottom {
      flex: none;
      font-size: var(--adm-font-size-1);
      height: 14px;
      line-height: 14px;
      color: var(--adm-color-weak);
    }
  }

  &-mark {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: solid 1px var(--adm-color-border);
    height: 45px;
    box-sizing: border-box;
    font-size: var(--adm-font-size-6);
    padding: 0 8px;

    & &-cell {
      flex: 1;
      text-align: center;
    }
  }
}
