.EditableDayPicker {
    .DayPickerInput {
        input {
            cursor: text;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid transparent;
            min-height: 24px;

            &.active {
                min-width: 100px;
            }

            &::placeholder {
                color: rgba(var(--center-channel-color-rgb), 0.4);
                opacity: 1;
            }

            &.error {
                border: 1px solid rgb(var(--error-text-rgb));
                border-radius: var(--default-rad);
            }
        }
    }

    .DayPickerInput-Overlay {
        background-color: rgba(var(--center-channel-bg-rgb));
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1);
        line-height: 100%;
    }

    .DayPicker-Day--today {
        color: #c74655;
    }

    .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
        background-color: rgba(var(--center-channel-color-rgb), 0.2);
    }
}
