@mixin ne-calendar {
  .#{$prefix}-calendar {
    width: $calendar-width;
    margin-bottom: $calendar-body-padding;
    .#{$prefix}-time-panel-body {
      width: 100%;
    }
    &-body {
      border-width: 0 $calendar-body-padding;
      border-style: solid;
      border-color: transparent;
    }
    &-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 40px;
      margin-bottom: $calendar-body-padding;
      border-bottom: 1px solid $calendar-hr-color;
    }
    &-date-header {
      border-width: 0 $calendar-body-padding;
      border-style: solid;
      border-color: transparent;
      // th {
      //   padding-top: $calendar-body-padding;
      // }
    }
    &-padding {
      display: inline-block;
      min-width: map-get($icon-sizes-map, medium) + 2 * $text-button-padding;
      height: 100%;
    }
    &-month-item,
    &-year-item {
      width: $calendar-month-width;
      height: $calendar-month-height;
    }
    &-date-item,
    &-month-item,
    &-year-item {
      display: block;
      margin: 0 auto;
      padding: 2px;
      border: none;
      border-radius: 2px;
      background: transparent;
      &:hover,
      &:focus {
        background: transparent;
        color: $primary-color;
      }
      &-selected {
        background-color: $primary-color;
        color: $white !important;
        &:hover,
        &:focus {
          border-color: shade($primary-color, 15%);
          background-color: shade($primary-color, 15%);
        }
      }
    }
    &-date-item {
      width: $calendar-date-size;
      height: $calendar-date-size;
      &-different-month {
        color: $calendar-date-different-month-color;
      }
      &-today {
        font-weight: bold;
        &:not(.#{$prefix}-calendar-date-item-different-month) {
          border: 1px solid $primary-color;
          color: $primary-color;
        }
      }
    }
    &-date-cell {
      position: relative;
      width: 36px;
      height: 36px;
      padding: 2px 0;
      border-radius: 2px;
      &-in-range:before {
        display: block;
        position: absolute;
        top: 2px;
        right: 0;
        bottom: 2px;
        left: 0;
        border: 0;
        border-radius: 0;
        background-color: tint($primary-color, 80%);
        content: '';
      }
    }
    &-month-cell,
    &-year-cell {
      padding: 8px 0;
    }
  }
}