/* react-datepicker's own wrappers are inline-block, so w-100 sized to content. */
.mc-date-field .react-datepicker-wrapper,
.mc-date-field .react-datepicker__input-container {
    display: block;
    width: 100%;
}

/* mc-icon-left/right have no CSS anywhere; position the icon here instead. */
.mc-date-field {
    position: relative;
    width: 100%;
}

.mc-date-field > .material-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--textColor);
    opacity: .65;
    pointer-events: none;
}

.mc-date-field--right > .material-icons {
    right: 10px;
}

.mc-date-field--left > .material-icons {
    left: 10px;
}

.mc-date-field--right .mc-label-field-input {
    padding-right: 34px;
}

.mc-date-field--left .mc-label-field-input {
    padding-left: 34px;
}

/* The popup has to clear modal bodies and table rows. */
.mc-date-field .react-datepicker-popper {
    z-index: 5;
}

/* The popper is a child of the field, so width:100% above also clamped it —
 * which wrapped a date+time picker's time column off-screen. */
.mc-date-field .react-datepicker__tab-loop,
.mc-date-field .react-datepicker-popper {
    width: max-content;
    max-width: none;
}

.dark_mode .mc-date-field .react-datepicker,
.dark_mode .mc-date-field .react-datepicker__header,
.dark_mode .mc-date-field .react-datepicker__month-dropdown,
.dark_mode .mc-date-field .react-datepicker__year-dropdown {
    background-color: var(--field-bg);
    border-color: var(--borderColor, rgba(255, 255, 255, .15));
    color: var(--textColor);
}

.dark_mode .mc-date-field .react-datepicker__day,
.dark_mode .mc-date-field .react-datepicker__day-name,
.dark_mode .mc-date-field .react-datepicker__current-month {
    color: var(--textColor);
}

.dark_mode .mc-date-field .react-datepicker__day:hover {
    background-color: var(--lightBG);
}

.mc-date-field .react-datepicker__day--selected,
.mc-date-field .react-datepicker__day--keyboard-selected {
    background-color: var(--primaryHEX);
    color: #fff;
}