label[data-label="datetime"] {
    padding                 : calc(var(--message-height) + var(--message-margin) + 0px) 0px 0px;
}

label[data-label="datetime"][data-status~="disabled"] {
    pointer-events          : none;
}

label[data-label="datetime"] .label__input {
    display                 : flex;
    flex-direction          : row;
    align-items             : stretch;
    width                   : 100%;
}

label[data-label="datetime"] .label__placeholder {
    position                : absolute;
    bottom                  : 0%;
    left                    : 0%;
    z-index                 : 5;
    width                   : 100%;
    height                  : calc(100% - (var(--message-height) + var(--message-margin)));
    font-size               : inherit;
    font-weight             : inherit;
    line-height             : inherit;
    padding                 : 7px 13px 7px;
    color                   : var(--white-65);
    cursor                  : text;
    transition-property     : bottom, left, height, font-size, line-height, padding, color, opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="datetime"][data-status~="focused"] .label__placeholder,
label[data-label="datetime"][data-status~="not_empty"] .label__placeholder {
    bottom                  : calc(100% - var(--message-height));
    left                    : 0%;
    height                  : var(--message-height);
    font-size               : 14px;
    line-height             : 1;
    padding                 : 0px;
    color                   : var(--white-100);
    cursor                  : auto;
}

label[data-label="datetime"] .label__input .label__display {
    flex                    : 1;
    display                 : block;
    width                   : 100%;
    font-family             : inherit;
    font-size               : inherit;
    font-weight             : inherit;
    line-height             : inherit;
    color                   : inherit;
    background-color        : var(--white-14);
    border                  : 1px solid var(--white-35);
    border-radius           : var(--input-border-radius);
    padding                 : 6px 12px 6px;
    transition-property     : border-color, box-shadow;
    transition-duration     : 0.15s;
}

label[data-label="datetime"][data-status~="disabled"] .label__input .label__display {
    background-color        : var(--black-39);
    opacity                 : 1;
    cursor                  : not-allowed;
}

label[data-label="datetime"] .label__placeholder ~ .label__input .label__display > * {
    opacity                 : 0;
    transition-property     : opacity;
    transition-duration     : 0.15s;
}

label[data-label="datetime"][data-status~="focused"] .label__placeholder ~ .label__input .label__display > *,
label[data-label="datetime"][data-status~="not_empty"] .label__placeholder ~ .label__input .label__display > * {
    opacity                 : 1;
}

label[data-label="datetime"] .label__input .label__display [data-segment] {
    cursor                  : text;
}

label[data-label="datetime"] .label__input .label__display [data-segment]:focus {
    background-color        : blue;
    outline                 : none;
}

label[data-label="datetime"] .label__title {
    position                : absolute;
    top                     : 0%;
    left                    : 0%;
    width                   : 100%;
    font-size               : 14px;
    line-height             : 1;
    transition-property     : opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="datetime"][data-status~="focused"] .label__placeholder ~ .label__title,
label[data-label="datetime"][data-status~="not_empty"] .label__placeholder ~ .label__title {
    opacity                 : 0;
}

label[data-label="datetime"] .label__message {
    position                : absolute;
    top                     : 0%;
    left                    : 0%;
    width                   : 100%;
    font-size               : 14px;
    line-height             : 1;
    opacity                 : 0;
    transition-property     : opacity;
    transition-duration     : var(--hover-animation);
}

label[data-label="datetime"][data-status~="success"] .label__message {
    color                   : var(--green-lime-100);
    opacity                 : 1;
}

label[data-label="datetime"][data-status~="notice"] .label__message {
    color                   : var(--amber-100);
    opacity                 : 1;
}

label[data-label="datetime"][data-status~="error"] .label__message {
    color                   : var(--pink-raspberry-100);
    opacity                 : 1;
}

label[data-label="datetime"][data-status~="success"]:hover .label__message,
label[data-label="datetime"][data-status~="notice"]:hover .label__message,
label[data-label="datetime"][data-status~="error"]:hover .label__message {
    opacity                 : 0;
}

label[data-label="datetime"][data-status~="success"] .label__message:not(:empty) ~ .label__title,
label[data-label="datetime"][data-status~="notice"] .label__message:not(:empty) ~ .label__title,
label[data-label="datetime"][data-status~="error"] .label__message:not(:empty) ~ .label__title {
    opacity                 : 0;
}

label[data-label="datetime"][data-status~="success"]:hover .label__message:not(:empty) ~ .label__title,
label[data-label="datetime"][data-status~="notice"]:hover .label__message:not(:empty) ~ .label__title,
label[data-label="datetime"][data-status~="error"]:hover .label__message:not(:empty) ~ .label__title {
    opacity                 : 1;
}

label[data-label="datetime"][data-status~="success"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="datetime"][data-status~="success"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="datetime"][data-status~="notice"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="datetime"][data-status~="notice"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="datetime"][data-status~="error"][data-status~="focused"] .label__message:not(:empty) ~ .label__placeholder,
label[data-label="datetime"][data-status~="error"][data-status~="not_empty"] .label__message:not(:empty) ~ .label__placeholder {
    opacity                 : 0;
}

label[data-label="datetime"][data-status~="error"] .label__input .label__display {
    border-color: var(--pink-raspberry-100);
    background-color: var(--pink-raspberry-14);
}

label[data-label="datetime"] .label__calendar {
    display                 : none;
    position                : absolute;
    top                     : 100%;
    right                   : 0%;
    z-index                 : 1000000;
    width                   : 300px;
    /* height                  : 220px; */
    background-color        : #161821;
    border                  : 1px solid var(--white-24);
    border-radius           : var(--input-border-radius);
    padding                 : 8px;
}

label[data-label="datetime"][data-status~="open"] .label__calendar {
    display                 : grid;
}

/* label[data-label="datetime"][date-status~=""] .label__calendar {
    display                 : block;
} */

label[data-label="datetime"] .label__calendar_icon {
    position                : absolute;
    top                     : calc((100% + var(--message-height) + var(--message-margin)) / 2);
    right                   : 10px;
    z-index                 : 10;
    border                  : 1px solid transparent;
    border-radius           : var(--input-border-radius);
    cursor                  : pointer;
    transform               : translate(0%, -50%);
    transition-property     : border-color, box-shadow;
    transition-duration     : 0.15s;
}

label[data-label="datetime"] .label__calendar_icon:focus {
    border-color            : var(--white-2);
    outline                 : 0;
    box-shadow              : 0 0 0 3.2px var(--white-36);
}

label[data-label="datetime"][data-status~="disabled"] .label__calendar_icon {
    display                 : none;
}

label[data-label="datetime"] .label__calendar_icon [data-icon] {
    --icon-size             : 16px;
}

[data-label="datetime"] .label__input {
  /* gap: 2px; */
  /* user-select: none; */
  /* cursor: default; */
}

[data-label="datetime"] .label__display {
  /* display: flex; */
  /* gap: 2px; */
}

[data-label="datetime"] .label__display [data-segment] {
  /* padding: 2px 4px; */
  /* min-width: 2ch; */
  /* text-align: center; */
  /* border-radius: 2px; */
  /* background: #f3f3f3; */
}

[data-label="datetime"] .label__display [data-segment].active {
  /* background: #007BFF; */
  /* color: white; */
}

[data-label="datetime"] .delimiter {
  /* color: #888; */
}

/* скрываем дисплей, если есть placeholder и нет фокуса/значения */
[data-label="datetime"]:not([data-status="focused"]):not([data-status="not_empty"]) .label__placeholder ~ .label__input .label__display {
  /* display: none; */
}

[data-label="datetime"] .calendar__date {
    display                 : block;
}

[data-label="datetime"] .calendar__panel {
    display                 : flex;
    flex-direction          : row;
    justify-content         : space-around;
}

[data-label="datetime"] .calendar__month {
    display                 : flex;
    flex-direction          : row;
    align-items             : center;
}

[data-label="datetime"] .calendar__month_prev {
    
}

[data-label="datetime"] .calendar__month_next {
    
}

[data-label="datetime"] .calendar__month_display {
    
}

[data-label="datetime"] .calendar__month_display > span {
    display                 : none;
}

[data-label="datetime"] .calendar__month_display > span[data-status~="active"] {
    display                 : block;
}

[data-label="datetime"] .calendar__year {
    display                 : flex;
    flex-direction          : row;
    align-items             : center;
}

[data-label="datetime"] .calendar__year_prev {
    
}

[data-label="datetime"] .calendar__year_next {
    
}

[data-label="datetime"] .calendar__month_prev [data-icon],
[data-label="datetime"] .calendar__month_next [data-icon],
[data-label="datetime"] .calendar__year_prev [data-icon],
[data-label="datetime"] .calendar__year_next [data-icon] {
    --icon-size             : 20px;
}

[data-label="datetime"] .calendar__year_display {
    
}

[data-label="datetime"] .calendar__weekdays {
    display                 : grid;
    grid-template-columns   : repeat(7, 1fr);
}

[data-label="datetime"] .calendar__weekday {
    text-align              : center;
    color                   : var(--white-54);
}

[data-label="datetime"] .calendar__weekday.dayoff {
    color                   : var(--tea-rose-100);
}

[data-label="datetime"] .calendar__days {
    display                 : grid;
    grid-template-columns   : repeat(7, 1fr);
}

[data-label="datetime"] .calendar__day {
    display                 : flex;
    justify-content         : center;
    align-items             : center;
    text-align              : center;
    height                  : calc(1em * var(--line-height) + 4px);
    color                   : var(--white-100);
    border-radius           : 2px;
    cursor                  : pointer;
}

[data-label="datetime"] .calendar__day[data-status~="dayoff"] {
    color                   : var(--crimson-100);
}

[data-label="datetime"] .calendar__day:hover {
    border                  : 1px solid var(--white-36);
    background-color        : var(--vivid-sky-blue-46);
}

[data-label="datetime"] .calendar__day[data-status~="other_month"] {
    color                   : var(--white-54);
}

[data-label="datetime"] .calendar__day[data-status~="other_month"][data-status~="dayoff"] {
    color                   : var(--tea-rose-100);
}

[data-label="datetime"] .calendar__day[data-status~="current"] {
    border                  : 1px solid var(--white-36);
}

[data-label="datetime"] .calendar__day[data-status~="selected"] {
    background-color        : var(--vivid-sky-blue-100);
    border                  : 2px solid var(--white-65);
}