@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';

$panelbar-color: $normal-text-color !default;
$panelbar-border-color: rgba(0, 0, 0, .08) !default;
$panelbar-header-color: $accent !default;
$panelbar-header-background: $background !default;
$panelbar-header-hover-color: blend-multiply($accent, darken($background, 14%)) !default;
$panelbar-expanded-background: $base !default;
$panelbar-selected-hover-background: blend-multiply($accent, darken($background, 8%)) !default;
$panelbar-focused-box-shadow: inset 0 0 0 2px darken($base, 8%) !default;
$panelbar-selected-focused-box-shadow: inset 0 0 0 2px blend-multiply($accent, darken($background, 8%)) !default;
$panelbar-selected-focused-hover-box-shadow: inset 0 0 0 2px blend-multiply($accent, darken($background, 14%)) !default;

@include exports('panelbar/theme') {

.k-panelbar {
    &.k-header,
    .k-item,
    .k-panel,
    > .k-item > .k-link {
        border-color: $panelbar-border-color;
    }

    .k-state-expanded {
        background: $panelbar-expanded-background;
    }

    .k-item {
        > .k-header {
            user-select: none;
        }

        .k-link {
            color: $panelbar-color;
            transition: $transition;

            &.k-state-selected {
                background-color: $selected-background;
                color: $selected-text-color;

                >.k-icon {
                    color: $selected-text-color;
                }

                &.k-state-focused {
                    box-shadow: $panelbar-selected-focused-box-shadow;

                    &:hover {
                        box-shadow: $panelbar-selected-focused-hover-box-shadow;
                    }
                }

                &:hover {
                    color: $selected-text-color;
                    background-color: $panelbar-selected-hover-background;
                }
            }

            &.k-state-focused {
                box-shadow: $panelbar-focused-box-shadow;
            }
        }

        &.k-state-disabled {
            >.k-link.k-header {
                color: $panelbar-header-color;
            }
        }
    }

    >.k-item>.k-header {
        color: $panelbar-header-color;
        background-color: $panelbar-header-background;

        &:hover {
            color: $panelbar-header-hover-color;
        }
    }

    .k-panel {
        .k-link:hover {
            background-color: $hover-background;
        }
    }
}
}