assistant,
dialog,
messagedialog,
message-dialog,
printdialog,
window.csd {
    > .titlebar {
        border-radius: rem(6px) rem(6px) 0 0;
    }
}

assistant,
printdialog,
window {
    headerbar,
    .titlebar {
        // Etched in the light style, shadow in the dark style
        $shadow: 0 1px rgba(white, 0.5);
        @if $color-scheme == "dark" {
            $shadow: 0 1px rgba(black, 0.67);
        }

        @extend %outset-background;
        background-color: #{"@color_primary"};
        color: $fg-color;

        .title {
            // Cannot be a number or fonts break in Flatpak
            font-weight: bold;
            text-shadow: $shadow
        }

        .subtitle {
            opacity: 0.75;
            font-size: 80%;
        }

        .titlebutton,
        .image-button,
        .mode-switch {
            -gtk-icon-shadow: $shadow;
        }

        // Reset so we don't affect things inside of child popovers/menus
        popover,
        menu {
            text-shadow: none;
            -gtk-icon-shadow: none;
        }
    }

    &.csd {
        .titlebar {
            box-shadow:
                outset-highlight("full"),
                // Intentionally not in ems since it's used as a stroke
                0 1px 0 0 #{'alpha(shade(@color_primary, 0.7), 0.4)'},
                0 1px rem(2px) rgba(black, 0.2);
            padding: rem(6px);

            @if $color-scheme == "dark" {
                box-shadow:
                    outset-highlight("full"),
                    // Intentionally not in ems since it's used as a stroke
                    0 0 0 1px #{'alpha(shade(@color_primary, 0.5), 0.5)'},
                    0 1px rem(2px) rgba(black, 0.2);
            }

            &:backdrop {
                box-shadow:
                    outset-highlight("full"),
                    0 0 0 1px #{'alpha(shade(@color_primary, 0.7), 0.3)'},
                    0 1px rem(2px) rgba(black, 0.15);
            }

            &.default-decoration {
                padding: rem(3px);
            }

            &.flat {
                background: inherit;
                color: inherit;
                box-shadow: outset-highlight("top");
            }
        }

        // Ephy Fix for 42
        widget.titlebar > headerbar {
            padding: rem(6px);
            box-shadow:
                // Intentionally not in ems since it's used as a stroke
                0 1px 0 0 #{'alpha(shade(@color_primary, 0.7), 0.4)'},
                0 1px rem(2px) rgba(black, 0.2);

            @if $color-scheme == "dark" {
                box-shadow:
                    // Intentionally not in ems since it's used as a stroke
                    0 0 0 1px #{'alpha(shade(@color_primary, 0.5), 0.5)'},
                    0 1px rem(2px) rgba(black, 0.2);
            }

            &:backdrop {
                box-shadow:
                    0 0 0 1px #{'alpha(shade(@color_primary, 0.7), 0.3)'},
                    0 1px rem(2px) rgba(black, 0.15);
            }
        }

        // Fixes double shadow in HdyTitleBar and Epiphany
        stack.titlebar headerbar,
        stack.titlebar headerbar:backdrop {
            box-shadow: none;
            padding: 0;
        }

        revealer headerbar {
            // Box shadow can't overlay content
            border-bottom: 1px solid $toplevel-border-color;
            border-radius: rem(6px) rem(6px) 0 0;
            box-shadow: outset-highlight("full");
            padding: rem(6px);
        }
    }

    // Hdy.Window
    &.unified {
        .titlebar {
            box-shadow:
                outset-highlight("bottom"),
                // Intentionally not in ems since it's used as a stroke
                0 1px 0 #{'alpha(shade(@color_primary, 0.7), 0.4)'},
                0 1px rem(2px) rgba(black, 0.2);

            @if $color-scheme == "dark" {
                box-shadow:
                    outset-highlight("bottom"),
                    // Intentionally not in ems since it's used as a stroke
                    0 1px 0 #{'alpha(shade(@color_primary, 0.5), 0.5)'},
                    0 1px rem(2px) rgba(black, 0.2);
            }

            &:backdrop:not(.flat) {
                box-shadow:
                    outset-highlight("bottom"),
                    0 1px 0 0 #{'alpha(shade(@color_primary, 0.7), 0.3)'},
                    0 1px rem(2px) rgba(black, 0.15);
            }
        }
    }

    // SSD doesn't calculate rems correctly
    &.ssd .titlebar {
        // Box shadow can't overlay content
        border-bottom: 1px solid $toplevel-border-color;
        border-radius: 6px 6px 0 0;
        box-shadow: outset-highlight("full");
        padding: 3px;

        button {
            border-radius: 3px;
            padding: 3px;
        }
    }
}

dialog.csd,
messagedialog.csd,
message-dialog.csd {
    > .titlebar {
       background-color: bg_color(2);
       box-shadow: outset-highlight("top");
       padding: rem(6px);

       &.default-decoration {
           padding: 0;
       }

       label.title {
           text-shadow: none;
           -gtk-icon-shadow: none;
           font-size: 0.1px; // Workaround for an issue in Gtk when setting 0px
           color: transparent;
       }
   }
}
