@include exports("panelbar/theme") {

    // Appearance
    .k-panelbar {
        @include fill(
            $panelbar-text,
            $panelbar-bg,
            $panelbar-border
        );


        // Root
        > .k-item {
            border-color: $header-border;
        }

        > .k-item > .k-link {
            @include fill(
                $panelbar-header-text,
                $panelbar-header-bg,
                $panelbar-header-border,
                $panelbar-header-gradient
            );
        }

        > .k-item > .k-link:hover,
        > .k-item > .k-link.k-state-hover {
            @include fill(
                $panelbar-header-hovered-text,
                $panelbar-header-hovered-bg,
                $panelbar-header-hovered-border,
                $panelbar-header-hovered-gradient
            );
        }

        > .k-item > .k-link.k-state-selected {
            @include fill(
                $panelbar-header-selected-text,
                $panelbar-header-selected-bg,
                $panelbar-header-selected-border,
                $panelbar-header-selected-gradient
            );
        }

        > .k-item > .k-link.k-state-focused {
            box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-bg, 7 );

            &:hover,
            &.k-state-hover {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-hovered-bg, 7 );
            }

            &.k-state-selected {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-header-selected-bg , 7 );
            }
        }


        // Sub
        .k-group {

            > .k-item > .k-link:hover,
            > .k-item > .k-link.k-state-hover {
                @include fill(
                    $panelbar-item-hovered-text,
                    $panelbar-item-hovered-bg,
                    $panelbar-item-hovered-border,
                    $panelbar-item-hovered-gradient
                );
            }

            > .k-item > .k-link.k-state-selected {
                @include fill(
                    $panelbar-item-selected-text,
                    $panelbar-item-selected-bg,
                    $panelbar-item-selected-border,
                    $panelbar-item-selected-gradient
                );
            }

            > .k-item > .k-link.k-state-focused {
                box-shadow: inset 0 0 0 3px try-darken( $panelbar-bg, 7 );

                &:hover,
                &.k-state-hover {
                    box-shadow: inset 0 0 0 3px try-darken( $panelbar-item-hovered-bg , 7 );
                }

                &.k-state-selected {
                    box-shadow: inset 0 0 0 3px try-darken( $panelbar-item-selected-bg , 7 );
                }
            }

        }

    }

}