.CalendarSlider {
  --month-width: calc((var(--calendar-cell-width) * 14 - var(--control-height-m) * 2) / 13);
  --year-width: calc(var(--month-width) * 12);
  --slider-height: var(--control-height-m);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(var(--calendar-cell-width) * 14 + var(--space-m));
}

  .CalendarSlider-Slider {
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: var(--slider-height);
    margin: 0 var(--space-xs);
    background: var(--color-control-bg-ghost);
    border-radius: var(--control-radius);
  }

  .CalendarSlider-Button_direction_prev {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .CalendarSlider-SliderBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }

  .CalendarSlider-Year {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: var(--year-width);
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }

  .CalendarSlider-Year_position_0 {
        -webkit-transform: translateX(calc(var(--year-width) * -1));
                transform: translateX(calc(var(--year-width) * -1));
      }

  .CalendarSlider-Year_position_1 {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }

  .CalendarSlider-Year_position_2 {
        -webkit-transform: translateX(calc(var(--year-width)));
                transform: translateX(calc(var(--year-width)));
      }

  .CalendarSlider-Year_position_3 {
        -webkit-transform: translateX(calc(var(--year-width) * 2));
                transform: translateX(calc(var(--year-width) * 2));
      }

  .CalendarSlider-Year_selected::before {
      content: '';
      position: absolute;
      left: var(--value-offset);
      bottom: 0;
      width: var(--value-width);
      height: var(--space-3xs);
      background-color: var(--color-control-bg-primary);
      pointer-events: none;
    }

  .CalendarSlider-YearLabel {
    position: absolute;
    right: 0;
    -webkit-transition: color 0.2s, -webkit-transform 0.5s;
    transition: color 0.2s, -webkit-transform 0.5s;
    transition: transform 0.5s, color 0.2s;
    transition: transform 0.5s, color 0.2s, -webkit-transform 0.5s;
  }

  .CalendarSlider-YearLabel_position_0 {
        -webkit-transform: translateX(calc(var(--month-width) * -13));
                transform: translateX(calc(var(--month-width) * -13));
      }

  .CalendarSlider-YearLabel_position_1 {
        -webkit-transform: translateX(calc(var(--year-width) / -2));
                transform: translateX(calc(var(--year-width) / -2));
      }

  .CalendarSlider-YearLabel_position_2 {
        -webkit-transform: translateX(calc(var(--space-2xs) * -1));
                transform: translateX(calc(var(--space-2xs) * -1));
      }

  .CalendarSlider-YearLabel_position_3 {
        -webkit-transform: translateX(calc(var(--year-width)));
                transform: translateX(calc(var(--year-width)));
      }

  .CalendarSlider-Month {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: var(--month-width);
    height: 100%;
    margin-bottom: var(--space-3xs);
    background: transparent;
    border: none;
    outline: transparent;
    cursor: pointer;
  }

  .CalendarSlider-MonthLabel {
    width: var(--month-width);
    height: var(--space-m);
    margin-bottom: var(--space-3xs);
  }

  .CalendarSlider-Selector {
    position: absolute;
    width: calc(var(--month-width) * 2);
    height: var(--slider-height);
    background-color: var(--color-control-bg-ghost);
    border-radius: var(--control-radius);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateX(var(--selector-offset));
            transform: translateX(var(--selector-offset));
  }
