/* Datepicker popup Styling */
.input-animation-container {
    margin-top: 4px;
}

.k-popup.k-datepicker-popup.k-calendar-container {
    border: none;
    border-width: 0px;
    border-radius: 12px;
    background-color: var(--tms-color-bg-popover-menu);
    overflow: hidden;
}

.k-popup.k-datepicker-popup.k-calendar-container .k-calendar .k-calendar-view {
    padding: 0px 12px 12px 12px;
}

.k-popup.k-datepicker-popup.k-calendar-container .k-calendar .k-calendar-header {
    padding: 8px 16px;
}

.k-animation-container .k-child-animation-container {
    border-radius: 12px;
    box-shadow: 0px 10px 100px 0px transparent;
}

.k-animation-container .k-child-animation-container:has(.k-popup.k-datepicker-popup.k-calendar-container) {
    animation: shadow-fade-in-datepicker 1000ms ease 150ms forwards;
}

.k-slide-down-appear {
    opacity: 0;
    transform: translateY(-100%);
}

.k-slide-down-appear-active {
    opacity: 1;
    transform: translateY(0);
    transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
}

.k-slide-down-exit {
    box-shadow: unset!important;
}

.k-slide-up-exit {
    box-shadow: unset!important;
}

/* Dropdown popup styling */
.k-popup.k-list-container.k-dropdownlist-popup {
    border: none;
    border-width: 0px;
    border-radius: 12px;
    padding: 0;
    background-color: var(--tms-color-bg-popover-menu);
    height: auto !important;
    box-shadow: none;
}

.k-animation-container .k-child-animation-container:has(.k-popup.k-list-container.k-dropdownlist-popup) {
    animation: shadow-fade-in-dropdown 1000ms ease 250ms forwards;
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul li {
    height: 48px;
    padding: 0 16px;
    border-bottom: solid 0.5px var(--tms-color-border-primary);
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul li:hover {
    background-color: var(--tms-color-bg-primary-hover);
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul li:last-child {
    border-bottom: 0px;
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul .k-list-item.k-selected {
    border-radius: 0;
    background-color: var(--tms-color-bg-active);
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul .k-list-item .k-list-item-text {
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--tms-color-text-secondary);
    font-family: 'InterTight-Medium';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.009375rem;
}

.k-popup.k-list-container.k-dropdownlist-popup .k-list .k-list-content .k-list-ul li:hover .k-list-item-text {
    color: var(--tms-color-text-secondary-hover);
}

@keyframes shadow-fade-in-datepicker {
    0% {
        box-shadow: 0px 10px 100px 0px transparent;
    }
    100% {
        box-shadow: 0px 30px 100px 0px rgba(20, 20, 20, 0.32);
    }
}

@keyframes shadow-fade-in-dropdown {
    0% {
        box-shadow: 0px 10px 100px 0px transparent;
    }
    100% {
        box-shadow: 0px 30px 50px 0px rgba(20, 20, 20, 0.20);
    }
}
/* #endregion */

/* #region TMSComboBox styling */

.k-list-item:last-child .combobox-menu-item .combobox-menu-item-button {
    border-bottom: unset; /* Disable divider for the last menu-item */
}

    /* #region Telerik ComboBox overrides */
        /* Dropdown menu */
        .k-popup.k-list-container.k-combobox-popup .k-list .k-list-content .k-list-ul .k-list-item,
        .k-popup.k-list-container.k-combobox-popup .k-list .k-list-content .k-list-ul,
        .k-popup.k-list-container.k-combobox-popup .k-list .k-list-content,
        .k-popup.k-list-container.k-combobox-popup .k-list,
        .k-popup.k-list-container.k-combobox-popup {
            cursor: default;
            padding: 0px;
        }
        
        .k-popup.k-list-container.k-combobox-popup .k-list .k-list-content .k-list-ul .k-list-item {
            width: 100%;
        }

        .k-popup.k-list-container.k-combobox-popup .k-list .k-list-content .k-list-ul .k-list-item.k-selected {
            background-color: var(--tms-color-bg-active);
        }
        /* Dropdown shadows */
        .k-animation-container .k-child-animation-container:has(.k-popup.k-list-container.k-combobox-popup) {
            box-shadow: unset;
            animation: shadow-fade-in-combobox 1000ms ease 300ms forwards;
        }
        .k-popup.k-list-container.k-combobox-popup {
            box-shadow: none;
        }
        @keyframes shadow-fade-in-combobox {
            0% {
                box-shadow: 0px 20px 40px 0px transparent;
            }
            100% {
                box-shadow: 0px 30px 50px 0px rgba(20, 20, 20, 0.20);
            }
        }
    /* #endregion */

/* #endregion */