/**
* DevExtreme (widgets/generic/tabPanel.generic.less)
* Version: 20.1.10
* Build date: Fri Jan 15 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./multiView.generic.less";
@import (once) "./tabs.generic.less";

@GENERIC_TABPANEL_INSET_SHADOW_LEFT: inset @GENERIC_TABS_BORDER_WIDTH 0;
@GENERIC_TABPANEL_INSET_SHADOW_TOP: inset 0 @GENERIC_TABS_BORDER_WIDTH;
@GENERIC_TABPANEL_INSET_SHADOW_RIGHT: inset (-@GENERIC_TABS_BORDER_WIDTH) 0;
@GENERIC_TABPANEL_INSET_SHADOW_BOTTOM: inset 0 (-@GENERIC_TABS_BORDER_WIDTH);

.tabpanel-shadow-mixin(@accent-color) {
    & > .dx-tabpanel-tabs {
        .dx-tabs {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_LEFT;
        }

        .dx-tab {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color;

            &.dx-tab-selected {
                box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT @accent-color;
            }

            &.dx-tab-selected,
            &.dx-tab-active {
                .dx-tab-content {
                    color: @tabs-tab-selected-color;
                }
            }
        }

        .dx-tabs-expanded {
            .dx-tab:not(.dx-tab-selected) {
                &:first-of-type {
                    box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;

                    .dx-rtl&,
                    .dx-rtl & {
                        box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
                    }
                }
            }
        }

        .dx-tabs-stretched {
            .dx-tab:not(.dx-tab-selected) {
                &:last-of-type {
                    box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;

                    .dx-rtl&,
                    .dx-rtl & {
                        box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
                    }
                }
            }
        }

        .dx-tabs-nav-button-left {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP;
        }

        .dx-tabs-nav-button-right {
            box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT;
        }
    }

    .dx-multiview-wrapper {
        border-color: @accent-color;
    }
}

.dx-tabpanel {
    > .dx-tabpanel-tabs {
        .dx-tabs {
            display: block;
            border: none;
            background-color: @tabs-tab-bg;
            color: @tabs-border-color;

            .dx-tab {
                color: @tabs-border-color;

                .dx-tab-content {
                    color: @tabs-tab-color;
                }

                &:after,
                &:before {
                    content: none;
                }
            }

            .dx-tabs-nav-button {
                color: @tabs-border-color;
            }
        }

        .dx-tab {
            width: 140px;
        }

        .dx-tabs-scrollable {
            margin-top: 0;
            margin-bottom: 0;
            height: 100%;

            .dx-tabs-wrapper {
                display: block;
                border: none;
            }
        }
    }

    &:not(.dx-empty-collection) {
        .dx-multiview-wrapper {
            border-top: none;
        }
    }

    .tabpanel-shadow-mixin(@tabs-border-color);

    &.dx-state-focused {
        .tabpanel-shadow-mixin(@tabs-focused-border-color);
    }

    .dx-multiview-wrapper {
        border: @GENERIC_TABS_BORDER;
    }
}
