// panels can be on any side of the screen
// some panel item theming is specific to panel orientation and is included in this section
// each panel is also split into three zones
// dnd is for panel edit mode
// dummy is for adding or moving panels
#panel {
    color: $dark_fg_color;
    height: 2.5em;
    width: 3.2em;
    &:highlight {
        background-color: $selected_bg_color;
    }
}
.panel-dummy {
    background-color: rgba(255, 0, 0, 0.6);
    &:entered {
        background-color: rgba(0, 255, 0, 0.6);
    }
}
.panelLeft {
    spacing: 4px;
    &:dnd {
        background-color: rgba(255, 0, 0, 0.6);
    }
    &:ltr {
        padding-right: 4px;
    }
    &:rtl {
        padding-left: 4px;
    }
    &.vertical {
        padding: 0;
        &:dnd {
        }
    }
}
.panelCenter {
    spacing: 4px;
    &:dnd {
        background-color: rgba(0, 255, 0, 0.6);
    }
    &.vertical {
        padding-left: 0;
        padding-right: 0;
        &:dnd {
        }
    }
}
.panelRight {
    spacing: 4px;
    &:dnd {
        background-color: rgba(0, 0, 255, 0.6);
    }
    &:ltr {
        padding-left: 0;
        spacing: 0;
    }
    &:rtl {
        padding-right: 0;
        spacing: 0;
    }
    &.vertical {
        padding: 0;
        &:dnd {
        }
    }
}
// panel borders must be defined with a border-top color or other color definition that encompasses border-top
// panels do not support different colors of borders on different edges
// due to a bug in cinnamons placing of panel items on a bordered panel small margins are used to ensure that bordered panel objects
// do not overlap the panel border
.panel-top {
    @extend %bg-grad-to-bottom;
    border-bottom: 1px solid;
    border-color: $exterior_border;
    .window-list-item-box {
        @extend %bg-grad-to-top;
        &:hover {
            @extend %hover-bg-grad-to-top;
        }
        &:active {
            @extend %panel-top-shared;
            &:hover {
                @extend %hover-selected-grad-to-top;
                }
        }
        &:checked {
            @extend %panel-top-shared;
            &:hover {
                @extend %hover-selected-grad-to-top;
                }            
        }
        &:focus {
            @extend %panel-top-shared;
            &:hover {
                @extend %hover-selected-grad-to-top;
                }
        }
    }
    .workspace-switcher {
        @extend %workspace-switcher-shared;
    }
    .applet-box {
        padding: 1px 3px;
        margin-bottom: 2px;
    }
    .applet-label {
    }
    .panel-launchers .launcher:hover {
        border-bottom: 2px solid;
        border-color: $selected_border;
    }
}
.panel-bottom {
    @extend %bg-grad-to-top;
    border-top: 1px solid;
    border-color: $exterior_border;
    .window-list-item-box {
        @extend %bg-grad-to-bottom;
        &:hover {
            @extend %hover-bg-grad-to-bottom;
        }
        &:active {
            @extend %panel-bottom-shared;
            &:hover {
                @extend %hover-selected-grad-to-bottom;
                }            
        }
        &:checked {
            @extend %panel-bottom-shared;
            &:hover {
                @extend %hover-selected-grad-to-bottom;
                }           
        }
        &:focus {
            @extend %panel-bottom-shared;
            &:hover {
                @extend %hover-selected-grad-to-bottom;
                }
        }
    }
    .workspace-switcher {
        @extend %workspace-switcher-shared;
    }
    .applet-box {
        padding: 1px 3px;
        margin-top: 2px;
    }
    .applet-label {
    }
    .panel-launchers .launcher:hover {
        border-top: 2px solid;
        border-color: $selected_border;
    }
}
.panel-left {
    @extend %bg-grad-to-right;
    border-right: 1px solid;
    border-color: $exterior_border;
    .window-list-item-box {
        @extend %bg-grad-to-left;
        margin-right: 1px;
        &:hover {
            @extend %hover-bg-grad-to-left;
        }
        &:active {
            @extend %panel-left-shared;
            &:hover {
                @extend %hover-selected-grad-to-left;
                }
        }
        &:checked {
            @extend %panel-left-shared;
            &:hover {
                @extend %hover-selected-grad-to-left;
                }
        }
        &:focus {
            @extend %panel-left-shared;
            &:hover {
                @extend %hover-selected-grad-to-left;
                }
        }
    }
    .applet-box {
        padding: 3px 1px;
        margin-right: 2px;
    }
    .workspace-switcher.panel-right .workspace-switcher {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .panel-launchers .launcher:hover {
        border-right: 3px solid;
        border-color: $selected_border;
    }
}
.panel-right {
    @extend %bg-grad-to-left;
    border-left: 1px solid;
    border-color: $exterior_border;
    .window-list-item-box {
        @extend %bg-grad-to-right;
        margin-left: 2px;
        &:hover {
            @extend %hover-bg-grad-to-right;
        }
        &:active {
            @extend %panel-right-shared;
            &:hover {
                @extend %hover-selected-grad-to-right;
                }
        }
        &:checked {
            @extend %panel-right-shared;
            &:hover {
                @extend %hover-selected-grad-to-right;
                }
        }
        &:focus {
            @extend %panel-right-shared;
            &:hover {
                @extend %hover-selected-grad-to-right;
                }
        }
    }
    .applet-box {
        padding: 3px 1px;
        margin-left: 2px;
    }
    .panel-launchers .launcher:hover {
        border-left: 3px solid;
        border-color: $selected_border;
    }
}
// a non feature - not worth themeing
.panel-corner {
    &:active {
    }
    &:overview {
    }
    &:focus {
    }
}
#appMenu {
    spacing: 4px;
}
.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: $dark_fg_color;
    transition-duration: 150;
    #appMenuIcon {
        app-icon-bottom-clip: 1px;
    }
    &:active {
        #appMenuIcon {
            app-icon-bottom-clip: 2px;
        }
        > .system-status-icon {
            icon-shadow: black 0 2px 2px;
        }
    }
    &:checked {
        #appMenuIcon {
            app-icon-bottom-clip: 2px;
        }
        > .system-status-icon {
            icon-shadow: black 0 2px 2px;
        }
    }
    &:focus {
        #appMenuIcon {
            app-icon-bottom-clip: 2px;
        }
        > .system-status-icon {
            icon-shadow: black 0 2px 2px;
        }
    }
    &:hover {
        color: $selected_bg_color;
    }
    &:overview {
    }
}
.panel-menu {
}
// remaining code is for panel items starting with the generic applets
.applet-separator {
    padding: 5px 4px;
}
.applet-separator-line {
    width: 2px;
    background: $selected_bg_color;
}
.applet-separator-line-vertical {
    border-color: $selected_bg_color;
    border-bottom: 2px solid;
}
.applet-spacer:highlight {
    border: 1px solid $selected_border;
}
.applet-box {
    color: $dark_fg_color;
    transition-duration: 150;
    border-radius: $roundness;
    &:checked {
        color: $selected_bg_color;
        .applet-label {
            color: $selected_bg_color;
        }
    }
    &:hover {
        color: $selected_bg_color;
        .applet-label {
            color: $selected_bg_color;
        }
    }
    &:highlight {
        border: 1px solid $selected_border;
        color: $selected_bg_color;
        .applet-label {
            color: $selected_bg_color;
        }
    }
}
.applet-label {
    font-weight: bold;
    color: $dark_fg_color;
}
.applet-icon {
    color: $dark_fg_color;
    icon-size: 1.14em;
    padding: 0;
    spacing: 0;
}
// used by power applet to warn of low battery
.system-status-icon {
    icon-size: 1.14em;
    padding: 0;
    spacing: 0;
    &.warning {
        color: $warning_color;
    }
    &.error {
        color: $error_color;
    }
}
.panel-status-button {
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    font-weight: bold;
    color: $dark_fg_color;
    height: 2em;
    &:hover {
        color: $selected_bg_color;
    }
}
// user applet specific themeing
.user-box {
    padding: 0.4em 1.3em;
    spacing: 10px;
}
.user-icon {
    padding: 4px;
}
.user-label {
    color: $dark_fg_color;
    font-weight: bold;
}
// the window list applet. Some third party applets inherit some of this theming.
.window-list-box {
    spacing: 3px;
    padding: 3px 10px;
    &.vertical {
        spacing: 3px;
        padding: 10px 3px;
    }
    #appMenuIcon {
        padding: 1px;
    }
}
.window-list-item-label {
}
// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
.window-list-item-box {
    border: 1px solid $interior_border;
    border-radius: $roundness;
    transition-duration: 150;
    &:hover {
        border: 1px solid $selected_border;
    }
    &:highlight {
        border: 1px solid $selected_border;
    }
    .progress {
        background-color: $success_color;
        border: 1px solid $selected_border;
        border-radius: $roundness;
        color: $info_fg_color;
    }
}
.window-list-item-demands-attention {
    background-color: $info_bg_color;
    color: $info_fg_color;
}
// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
.window-list-preview {
    @extend %bg-grad-to-right;
    border-radius: $roundness;
    border: 1px solid $exterior_border;
    padding: 10px 15px;
    spacing: 1em;
    color: $dark_fg_color;
}
// the sound player applet
.sound-player {
    StButton {
        width: 18px;
        height: 18px;
        padding: 5px;
        color: $button_fg_color;
        &:small {
            width: 16px;
            height: 16px;
            padding: 1px;
            StIcon {
                icon-size: 1em;
            }
        }
        StIcon {
            icon-size: 1.5em;
        }
        &:hover {
        }
        &:active {
        }
    }
    .slider {
        @extend %slider-shared;
    }
    StBoxLayout {
        spacing: 0.5em;
    }
    > StBoxLayout {
        padding: 5px;
    }
}
.sound-player-generic-coverart {
    background: rgba(0,0,0,0.2);
}
.sound-player-overlay {
    width: 300px;
    padding: 12px 16px;
    spacing: 0.5em;
    @extend %bg-grad-to-bottom;
    color: $dark_fg_color;
    StButton {
        @extend %shared-button;
        border-radius: $roundness;
        padding: 8px;
        &:hover {
            @extend %shared-button-hover;
        }
        &:focus {
            color: $selected_fg_color;
        }
        &:active {
            @extend %shared-button-active;
        }
        > StIcon {
            icon-size: 1.5em;
        }
    }
    StBoxLayout {
        padding-top: 2px;
    }
}
// workspace switcher applet simple button view
.workspace-button {
    width: 2em;
    height: 1em;
    color: $dark_fg_color;
    border: 1px solid $interior_border;
    margin: 2px;
    transition-duration: 150;
    &:outlined {
        background-color: $selected_bg_color;
        color: $selected_fg_color;
        border-color: $selected_border;
    }
}
// workspace switcher applet graph view
.workspace-graph {
    padding: 2px;
    spacing: 2px;
    .workspace {
        border: 1px solid $interior_border;
        @extend %bg-grad-to-bottom;
        &:active {
            border: 1px solid $interior_border;
            @extend %selected-bg-grad-to-bottom;
            .windows {
                -active-window-background: rgba(255, 255, 255, 0.8);
                -active-window-border: rgba(0, 0, 0, 0.9);
                -inactive-window-background: rgba(140, 140, 140, 0.8);
                -inactive-window-border: rgba(0, 0, 0, 0.7);
            }
        }
        .windows {
            -active-window-background: rgba(140, 140, 140, 0.8);
            -active-window-border: rgba(0, 0, 0, 0.7);
            -inactive-window-background: rgba(140, 140, 140, 0.8);
            -inactive-window-border: rgba(0, 0, 0, 0.7);
        }
    }
}
// most panel launcher themeing is orientation specific
.panel-launchers {
    padding: 1px 4px;
    spacing: 4px;
    &.vertical {
        padding: 4px 1px;
        spacing: 4px;
        .launcher .icon-box {
            padding-top: 0;
        }
    }
}
.notification-applet-padding {
    padding: .5em 1em;
}
.notification-applet-container {
    max-height: 100px;
}
.systray {
    spacing: 3px;
}
.flashspot {
    background-color: $selected_bg_color;
}

