// Apply all 
@mixin ag-v22-to-v23-compatibility-mode {
    @if $ag-compatibility-mode == "legacy" {
        @include ag-v22-to-v23-implement-deleted-variables();
        @include ag-v22-to-v23-alias-deleted-placeholders();
        @include ag-v22-to-v23-alias-renamed-classes();
    }
}

@mixin ag-v22-to-v23-implement-deleted-variables {
    // - $ag-group-component-*
    .ag-group {
        background-color: $ag-group-component-background-color;
        border-color: $ag-group-component-border-color;
    }
    .ag-group-title-bar {
        background-color: $ag-group-component-title-background-color;
    }

    // - $ag-tooltip-*
    .ag-tooltip {
        background-color: $ag-tooltip-background-color;
        color: $ag-tooltip-foreground-color;
        padding: $ag-tooltip-padding;
        border: $ag-tooltip-border-style $ag-tooltip-border-width $ag-tooltip-border-color;
        border-radius: $ag-tooltip-border-radius;
        transition: opacity 1s;
    }

    // - $ag-dialog-*
    .ag-panel {
        // Note: $ag-dialog-background-color not applied. In practice it wasn't visible in v22
        // because all elements within the panel had opaque backgrounds, and enabling it on v23
        // causes issues as some elements are transparent
        // background-color: $ag-dialog-background-color;
        border: $ag-dialog-border-size $ag-dialog-border-style $ag-dialog-border-color;
    }

    .ag-panel-title-bar {
        background-color: $ag-dialog-title-background-color;
        border-bottom: 1px solid lighten($ag-border-color, 10%);
        color: $ag-dialog-title-foreground-color;
        height: $ag-dialog-title-height;
        font-size: $ag-dialog-title-font-size;
        font-weight: $ag-dialog-title-font-weight;
        font-family: $ag-dialog-title-font-family;
        padding: $ag-dialog-title-padding;
        // overriding padding-left reproduces behaviour of v22
        padding-left: $ag-cell-horizontal-padding;
    }

    .ag-panel-title-bar-button-icon {
        height: $ag-dialog-title-icon-size;
        width: $ag-dialog-title-icon-size;
        line-height: $ag-dialog-title-icon-size;
        font-size: $ag-dialog-title-icon-size;
    }

    // - $ag-font-weight
    .ag-root-wrapper {
        font-weight: $ag-font-weight;
    }

    // - $ag-secondary-font-*
    .ag-header,
    .ag-dnd-ghost,
    .ag-filter-toolpanel,
    .ag-column-drop-empty-message,
    .ag-status-bar {
        font-family: $ag-secondary-font-family;
        font-size: $ag-secondary-font-size;
        font-weight: $ag-secondary-font-weight;
    }

    @if global-variable-exists("ag-custom-icon-color-defined") and $ag-custom-icon-color-defined {
        .ag-icon {
            color: $ag-icon-color !important;
        }
    }

    .ag-row {
        border-width: $ag-row-border-width;
    }
}

// Allow custom themes to use old placeholders instead of the new class name
// selectors e.g. %tab instead of .ag-tab
@mixin ag-v22-to-v23-alias-deleted-placeholders {
    .ag-tab {
        @extend %tab !optional;
    }

    .ag-tab-selected {
        @extend %selected-tab !optional;
    }

    .ag-menu,
    .ag-cell.ag-cell-inline-editing,
    .ag-popup-editor,
    .ag-select-agg-func-popup,
    .ag-overlay-loading-center {
        @extend %card !optional;
    }

    @if & {
        &.ag-dnd-ghost {
            @extend %card !optional;
        }
    }
    @else {
        @at-root {
            .ag-dnd-ghost {
                @extend %card !optional;
            }
        }
    }
}

// Allow custom themes to use the old class names for various elements (e.g. use the old
// .ag-group-component instead of the new .ag-group
@mixin ag-v22-to-v23-alias-renamed-classes {
    .ag-group {
        @extend .ag-group-component !optional;
    }
    
    .ag-group-title-bar {
        @extend .ag-group-component-title-bar !optional;
    }
    
    .ag-group-title-bar-icon {
        @extend .ag-group-component-title-bar-icon !optional;
    }
    
    .ag-group-title {
        @extend .ag-group-component-title !optional;
    }
    
    .ag-group-container {
        @extend .ag-group-component-container !optional;
    }
    
    .ag-group-toolbar {
        @extend .ag-group-component-toolbar !optional;
    }
    
    .ag-row-loading {
        @extend .ag-row-stub !optional;
    }
    
    .ag-column-drop-empty {
        @extend .ag-faded !optional;
    }
    
    .ag-group-item-alignment-stretch {
        @extend .ag-alignment-stretch !optional;
    }
    
    .ag-group-item-alignment-start {
        @extend .ag-alignment-start !optional;
    }
    
    .ag-group-item-alignment-end {
        @extend .ag-alignment-end !optional;
    }
    
    .ag-drag-handle {
        @extend .ag-column-drag !optional;
    }
    
    .ag-chart-settings-card-selector {
        @extend .ag-nav-card-selector !optional;
    }
    
    .ag-chart-settings-card-item {
        @extend .ag-nav-card-item !optional;
    }
    
    .ag-panel-title-bar {
        @extend .ag-title-bar !optional;
    }
    
    .ag-panel-title-bar-title {
        @extend .ag-title-bar-title !optional;
    }
    
    .ag-panel-title-bar-buttons {
        @extend .ag-title-bar-buttons !optional;
    }
    
    .ag-panel-title-bar-button {
        @extend .ag-button !optional;
    }
    
    .ag-cell-auto-height {
        @extend .ag-cell-with-height !optional;
    }
    
    .ag-status-name-value {
        @extend .ag-name-value !optional;
    }
    
    .ag-angle-select-parent-circle {
        @extend .ag-parent-circle !optional;
    }
    
    .ag-angle-select-child-circle {
        @extend .ag-child-circle !optional;
    }
    
    .ag-picker-field-button {
        @extend .ag-picker-button !optional;
    }
    
    .ag-spectrum-fill {
        @extend .ag-fill !optional;
    }
    
    .ag-spectrum-tool {
        @extend .ag-hue-alpha !optional;
    }
    
    .ag-tabs-header {
        @extend .ag-tab-header !optional;
    }
    
    .ag-tabs-body {
        @extend .ag-tab-body !optional;
    }
    
    .ag-chart-menu-tabs {
        @extend .ag-chart-tabbed-menu !optional;
    }
    
    .ag-column-select {
        @extend .ag-column-select-panel !optional;
    }
    
    .ag-column-select-header {
        @extend .ag-primary-cols-header-panel !optional;
    }
    
    .ag-column-select-header-filter {
        @extend .ag-primary-cols-filter !optional;
    }
    
    .ag-column-select-header-filter-wrapper {
        @extend .ag-primary-cols-filter-wrapper !optional;
    }
    
    .ag-column-select-list {
        @extend .ag-primary-cols-list-panel !optional;
    }
    
    .ag-loading {
        @extend .ag-stub-cell !optional;
    }
    
    .ag-column-select-column {
        @extend .ag-column-tool-panel-column !optional;
    }
    
    .ag-column-select-column-group {
        @extend .ag-column-tool-panel-column-group !optional;
    }
    
    .ag-column-select-column-label {
        @extend .ag-column-tool-panel-column-label !optional;
    }
    
    .ag-column-select-indent-1 {
        @extend .ag-toolpanel-indent-1 !optional;
    }
    
    .ag-column-select-indent-2 {
        @extend .ag-toolpanel-indent-2 !optional;
    }
    
    .ag-column-select-indent-3 {
        @extend .ag-toolpanel-indent-3 !optional;
    }
    
    .ag-column-select-indent-4 {
        @extend .ag-toolpanel-indent-4 !optional;
    }
    
    .ag-column-select-indent-5 {
        @extend .ag-toolpanel-indent-5 !optional;
    }
    
    .ag-column-select-add-group-indent {
        @extend .ag-toolpanel-add-group-indent !optional;
    }
    
    .ag-column-drop-horizontal-half-width {
        @extend .ag-width-half !optional;
    }    
}