.ml-calendar {
  .ml-calendar-date-content {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .ml-calendar-date-day-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 5px;
    text-align: center;
  }
  .ml-calendar-date-day-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    border-radius: 50%;
    &.ss-primary {
      background-color: $ml-theme-primary-color;
    }
    &.ss-success {
      background-color: $ml-theme-success-color;
    }
    &.ss-info {
      background-color: #909399;
    }
    &.ss-warning {
      background-color: $ml-theme-warning-color;
    }
    &.ss-danger {
      background-color: $ml-theme-error-color;
    }
    &.ss-gray {
      background-color: $ml-gray-color;
    }
    &.ss-blue {
      background-color: $ml-blue-color;
    }
    &.ss-green {
      background-color: $ml-green-color;
    }
    &.ss-pink {
      background-color: $ml-pink-color;
    }
    &.ss-red {
      background-color: $ml-red-color;
    }
    &.ss-orange {
      background-color: $ml-orange-color;
    }
    &.ss-purple {
      background-color: $ml-purple-color;
    }
    &.ss-dark-blue {
      background-color: $ml-dark-blue-color;
    }
  }
}