/*
задается сверху
--item-width
--parent-width
*/

.DateTimeSlider {
  --slider-height: var(--control-height-m);
  --slider-width: calc(var(--date-time-cell-width) * 14 + var(--space-m));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: var(--slider-width);
}

.DateTimeSlider-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);
  }

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

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

.DateTimeSlider-Parent {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: var(--parent-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;
  }

.DateTimeSlider-Parent_position_0 {
        -webkit-transform: translateX(calc(var(--parent-width) * -1));
                transform: translateX(calc(var(--parent-width) * -1));
      }

.DateTimeSlider-Parent_position_1 {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }

.DateTimeSlider-Parent_position_2 {
        -webkit-transform: translateX(calc(var(--parent-width)));
                transform: translateX(calc(var(--parent-width)));
      }

.DateTimeSlider-Parent_position_3 {
        -webkit-transform: translateX(calc(var(--parent-width) * 2));
                transform: translateX(calc(var(--parent-width) * 2));
      }

.DateTimeSlider-Parent_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;
      }

/* исправляет разрыв между полосками */

.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected {
        left: calc(var(--value-offset) - 1px);
        width: calc(var(--value-width) + 1px);
      }

.DateTimeSlider-ParentLabel {
    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;
  }

.DateTimeSlider-ParentLabel_position_0 {
        -webkit-transform: translateX(calc(var(--item-width) * -13));
                transform: translateX(calc(var(--item-width) * -13));
      }

.DateTimeSlider-ParentLabel_position_1 {
        -webkit-transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
                transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
      }

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

.DateTimeSlider-ParentLabel_position_3 {
        -webkit-transform: translateX(calc(var(--parent-width)));
                transform: translateX(calc(var(--parent-width)));
      }

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

.DateTimeSlider-ItemLabel {
    width: var(--item-width);
    height: var(--space-m);
    margin-bottom: var(--space-3xs);
  }

.DateTimeSlider-Selector {
    position: absolute;
    width: calc(var(--item-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(calc(var(--item-width) * var(--current-item)));
            transform: translateX(calc(var(--item-width) * var(--current-item)));
  }