@mixin workspaces($frame:'',$button:'', $iname:'-gtk-icon-effect') {
    .workspace-popover {
        #{$frame}.container { padding: 0; }

        #{$button}.workspace-icon-button {
            padding: 2px;
            border: none;
            box-shadow: none;
            border-radius: 0;
            background: transparent;

            &:hover {
                background: $button_bg;
                #{$iname}: none;
            }
        }

        .workspace-popover-button-box > button {
            border: none;
            box-shadow: none;
            border-radius: 0;
            &:dir(ltr) { padding-left: 5px; }
            &:dir(rtl) { padding-right: 5px; }
            &:last-child {
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        }
    }

    .workspace-switcher {
        .workspace-layout {
            background: rgba(0,0,0,0.1);
        }

        .workspace-item {
            &.current-workspace {
                background: transparentize($fg_color, 0.90);
            }
        }

        label.workspace-more-label {
            border: 1px solid white;
            padding: 0;
            margin: 0;
        }

        #{$button}.workspace-icon-button {
            padding: 0;
            border-color: transparent;
            background: transparent;
        }

        .right &,
        .left & {
            .workspace-switcher {
                .workspace-item {
                    border-right: 1px solid transparent;
                    border-left: 1px solid transparent;
                }
            }
        }

        .bottom &,
        .top & {
            .workspace-switcher {
                .workspace-item {
                    border-bottom: 1px solid transparent;
                    border-top: 1px solid transparent;
                }
            }
        }
    }

    .budgie-panel.transparent {
        .workspace-switcher {
            border-color: rgba(0,0,0,0.2);
            .workspace-item {
                border-color: rgba(0,0,0,0.2);
            }
        }

        .left & {
            .workspace-switcher {
                #{$button}.workspace-add-button {
                    border-right: 1px solid rgba(0,0,0,0.2);
                    border-left: 1px solid rgba(0,0,0,0.2);
                    border-bottom: 1px solid rgba(0,0,0,0.2);
                    border-top: 1px solid transparent;
                }
                .workspace-item {
                    border-right: 1px solid rgba(0,0,0,0.2);
                }
            }
        }

        .top & {
            .workspace-switcher {
                #{$button}.workspace-add-button {
                    border-right: 1px solid rgba(0,0,0,0.2);
                    border-left: 1px solid transparent;
                    border-bottom: 1px solid rgba(0,0,0,0.2);
                    border-top: 1px solid rgba(0,0,0,0.2);
                }
                .workspace-item {
                    border-bottom: 1px solid rgba(0,0,0,0.2);
                }
            }
        }

        .right & {
            .workspace-switcher {
                #{$button}.workspace-add-button {
                    border-right: 1px solid rgba(0,0,0,0.2);
                    border-left: 1px solid rgba(0,0,0,0.2);
                    border-bottom: 1px solid rgba(0,0,0,0.2);
                    border-top: 1px solid transparent;
                }
                .workspace-item {
                    border-left: 1px solid rgba(0,0,0,0.2);
                }
            }
        }

        .bottom & {
            .workspace-switcher {
                #{$button}.workspace-add-button {
                    border-right: 1px solid rgba(0,0,0,0.2);
                    border-left: 1px solid transparent;
                    border-bottom: 1px solid rgba(0,0,0,0.2);
                    border-top: 1px solid rgba(0,0,0,0.2);
                }
                .workspace-item {
                    border-top: 1px solid rgba(0,0,0,0.2);
                }
            }
        }
    }

    .left .workspace-switcher,
    .right .workspace-switcher {
        border-top: 1px solid rgba(0,0,0,0.4);

        .workspace-item {
            border-bottom: 1px solid rgba(0,0,0,0.4);
            transition: background 300ms linear;
        }

        #{$button}.workspace-add-button {
            border-top: 1px solid $button_bg;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            border-left: 1px solid $button_bg;
            border-right: 1px solid $button_bg;
        }
    }

    .top .workspace-switcher,
    .bottom .workspace-switcher {
        border-left: 1px solid rgba(0,0,0,0.4);

        .workspace-item {
            border-right: 1px solid rgba(0,0,0,0.4);
            transition: background 300ms linear;
        }

        #{$button}.workspace-add-button {
            border-left: 1px solid $button_bg;
            border-right: 1px solid rgba(0,0,0,0.2);
            border-top: 1px solid $button_bg;
            border-bottom: 1px solid $button_bg;
        }
    }
}
