/* Radzen Tabs */
.rz-tabview {
    .rz-tabview-nav {
        li {
            background-color: var(--va-grey-light);

            &:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
                background-color: var(--va-grey);
            }

            &.rz-tabview-selected {
                background-color: var(--va-blue);
                color: var(--va-text-dark)
            }
        }

        .rz-tabview-title {
            font-size: small;
            letter-spacing: 2px;
            line-height: 11px;
        }
    }

    .rz-tabview-panel {
        background-color: var(--va-grey);
        padding: 12px 10px 10px;
    }
}

/* Radzen Card */
.rz-card {
    background-color: var(--va-grey);
    padding: 12px;

    .simple-text {
        color: white;
    }

    &.simple-green {
        background-color: var(--va-mint-green);

        .simple-text {
            color: var(--va-text-dark);
        }
    }

    &.simple-yellow {
        background-color: var(--va-yellow);

        .simple-text {
            color: var(--va-text-dark);
        }
    }

    &.simple-red {
        background-color: var(--va-tomato-red);

        .simple-text {
            color: white;
        }
    }

    &.no-bottom-padding {
        padding-bottom: 0;
    }
}

/* Radzen Dropdown */
.rz-dropdown {
    cursor: pointer;

    &.rz-clear {
        background-color: var(--va-blue);

        .rz-dropdown-label, .rz-dropdown-trigger-icon, .rz-dropdown-clear-icon {
            color: var(--va-text-dark);
            padding-top: 1px;
        }

        &.rz-state-empty {
            background-color: var(--va-grey-light);

            .rz-dropdown-label, .rz-dropdown-trigger-icon, .rz-dropdown-clear-icon {
                color: var(--va-text-light);
            }
        }
    }
}

.rz-dropdown-panel {
    .rz-dropdown-items {
        li.rz-dropdown-item {
            background-color: var(--va-grey-light);
            color: var(--va-text-light);

            &:hover {
                background-color: var(--va-blue);
                color: var(--va-text-light);
            }

            &.rz-state-highlight {
                background-color: var(--va-blue);
                color: var(--va-text-dark);
            }
        }
    }
}

/* Radzen Button */
.rz-button {
    letter-spacing: 2px;
    font-weight: normal;

    &.rz-shade-default {
        &.rz-primary {
            background-color: var(--va-grey);
            color: var(--va-text-light);
        }

        &.rz-secondary {
            background-color: var(--va-blue);
            color: var(--va-text-dark);
        }
        
        &.rz-danger {
            background-color: var(--va-tomato-red);
            color: var(--va-text-light);
        }
    }

    &.rz-toggle-button {
        transition: background-color var(--rz-transition), color var(--rz-transition);
        
        &.rz-primary {
            background-color: var(--va-grey);
            color: var(--va-text-light);

            &.rz-state-active {
                background-color: var(--va-blue);
                color: var(--va-text-dark);
            }
        }
    }
}

/* Radzen Select Bar */
.rz-selectbutton {
    .rz-button-text {
        letter-spacing: 2px;
    }
    
    .rz-button.rz-button-sm {
        border: 0;

        &.rz-state-active {
            background-color: var(--va-blue);
            color: var(--va-text-dark)
        }
    }
}

/* Radzen Toggle Button */
.va-toggle-button.rz-toggle-button {
    &.rz-primary {
        letter-spacing: 2px;
        font-weight: normal;

        &.rz-shade-default {
            background-color: var(--va-grey);
            color: var(--va-text-light);
        }

        &.rz-shade-darker.rz-state-active {
            background-color: var(--va-blue);
            color: var(--va-text-dark);
        }
    }

    &.small {
        padding: 0 9px 0 5px;
        min-height: 32px;
    }

    &.smaller {
        padding: 0 5px 0 3px;
        min-height: 25px;
        letter-spacing: 1px;

        &.squared {
            padding: 3px 0;
            min-width: 25px;
        }
    }
}

/* Radzen Calendar */
.va-calendar {
    width: 170px;

    &.invalid .rz-calendar .rz-inputtext {
        &, &:hover, &:focus {
            box-shadow: 0 0 0 2px var(--va-tomato-red);
        }
    }

    .rz-calendar {
        .rz-inputtext {
            letter-spacing: 1px;
            background-color: var(--va-blue);
            color: var(--va-text-dark);
        }

        .rz-datepicker-trigger {
            color: var(--va-text-dark);
        }

        &:hover {
            .rz-datepicker-trigger {
                color: var(--va-text-dark);
                background-image: none;
            }
        }
    }
}

.rz-datepicker.rz-popup {
    background-color: var(--va-grey);
    border: 3px solid var(--va-grey-light);

    .rz-datepicker-group {
        .rz-datepicker-header {
            background-color: var(--va-grey);
            border-bottom: 3px solid var(--va-grey-light);

            .rz-datepicker-title .rz-dropdown {
                background-color: var(--va-grey-light);

                &:first-child {
                    width: 130px !important;
                }
            }
        }

        .rz-datepicker-calendar-container .rz-datepicker-calendar {
            th {
                padding: 7px 0;
            }

            td {
                border: 0;

                & span {
                    padding: 7px;
                    border-radius: 5px;

                    &.rz-state-active {
                        background-color: var(--va-blue);
                        color: var(--va-text-dark);
                    }

                    &:not(.rz-state-active) {
                        &.rz-datepicker-today {
                            &, &.rz-state-focused {
                                background-color: var(--va-grey);
                                color: var(--va-blue);
                                box-shadow: 0 0 0 1px var(--va-blue);
                            }
                        }

                        &.rz-state-default:hover {
                            background-color: var(--va-blue);
                            color: var(--va-text-dark);
                        }

                        &.rz-state-focused {
                            background-color: unset;
                            color: unset;
                        }
                    }
                }
            }
        }
    }

    .rz-timepicker {
        border-top: 3px solid var(--va-grey-light);

        .rz-spinner {
            background-color: var(--va-grey-light);
        }

        .rz-button {
            background-color: var(--va-blue);
            color: var(--va-text-dark);
        }
    }
}

/* Radzen Menu */
.rz-menu:not(.rz-profile-menu) {
    background-color: var(--va-grey-light);
    color: var(--va-text-light);
    margin: auto 8px;
    
    & .rz-navigation-item-wrapper .rz-navigation-item-link {
        background-color: var(--va-grey-light);
        color: var(--va-text-light);
        padding: 0 .5rem;
    }
    
    & .va-right-align .rz-navigation-menu {
        right: 0;
    }

    .rz-navigation-menu {
        top: 32px;
    }
    
    & .rz-form-field-content {
        background-color: var(--va-grey);
        color: var(--va-text-light);
        margin-top: 0;
    }
    
    & .va-menu-without-caret .rz-navigation-item-icon-children {
        display: none;
    }
    
    & .va-menu-without-text .rz-navigation-item-icon {
        margin: auto;
    }
}

/* Radzen Slider */
.rz-slider {
    --rz-slider-range-background-color: var(--va-blue);
    --rz-slider-handle-background-color: var(--va-blue);
}

/* Radzen Icon */
.rzi {
    &.small {
        font-size: 14px;
    }
}

/* Radzen Chart */
.single-set-horizontal-bar-chart {
    .rz-series-data-label {
        dominant-baseline: central;
    }

    &.clickable .rz-bar-series {
        cursor: pointer;
        stroke: var(--va-blue);

        path:hover {
            /* stroke width is given as an inline style by radzen, so !important is necessary here */
            stroke-width: 2px !important;
        }
    }
}

/* Radzen Multiselect Panel */
.rz-multiselect-panel {
    
    .rz-chkbox {
        .rz-state-active {
            background-color: var(--va-blue);
        }

        &.rzi{
            color: var(--va-text-dark);
        }
    }

    .rz-multiselect-header{
        color: var(--va-text-light);
    }
    

    .rz-multiselect-items-wrapper {
        .rz-multiselect-items {
            li.rz-multiselect-item {
                color: var(--va-text-light);

                &:hover {
                    background-color: var(--va-blue);
                    color: var(--va-text-light);
                }

                &.rz-state-highlight {
                    background-color: var(--va-blue);
                    color: var(--va-text-dark);
                }
            }
        }
    }
}

/* Radzen Data Grid (Table) */
.rz-data-grid {
    .rz-grid-table {
        tbody tr.rz-state-highlight > td {
            &.rz-frozen-cell {
                &:after, 
                &:before, 
                .rz-cell-data {
                    background-color: var(--va-grey-dark);
                    color: var(--va-text-light);
                }
            }
        }
    }
}

/* Radzen Grid Date Filter */
.rz-grid-date-filter{

    .rz-date-filter {
        background-color: var(--va-grey);
    }

    .rz-calendar-header {
        background-color: var(--va-grey);
    }

    .rz-grid-filter-buttons {
        background-color: var(--va-grey);
    }

    .rz-button.rz-shade-default.rz-apply-filter,
    .rz-button.rz-shade-default.rz-clear-filter{
        background-color: var(--va-grey-light);
        color: var(--va-text-light);
    }

    .rz-listbox-item {
        color: var(--va-text-light);

        &:hover {
            background-color: var(--va-blue) !important;
            color: var(--va-text-light) !important;
        }

        &.rz-state-highlight {
            background-color: var(--va-blue);
            color: var(--va-text-dark);
        }
    }

    .rz-calendar-view {
        td .rz-state-default {
            color: var(--va-text-light);

            &:hover {
                background-color: var(--va-blue);
                color: var(--va-text-light);
            }

            &.rz-state-focused {
                background-color: var(--va-blue);
                color: var(--va-text-light);
            }
        }
    }

    .rz-numeric-button {
        background-color: var(--va-blue);
        color: var(--va-text-light);
    }
}

/* Radzen Splitter */
.rz-splitter {
    .rz-splitter-bar {
        opacity: unset;
    }

    &.splitter-map-and-flights-table > .rz-splitter-bar {
        > .rz-collapse,
        > .rz-expand {
            display: none;
        }
    }
}

/* Radzen Textbox */
.gray-disabled-textbox {
    --rz-input-disabled-background-color: var(--va-grey);
    text-align: center;
}