.floating-notifications {
    & > .notifications .floating-notification {
        $background-color: darken($color: $color1, $amount: 40);
        background: $background-color;
        border-radius: 16px;
        margin: 14px;
        box-shadow: 0 0 8px 2px rgba($background, .9);

        & > .top {
            border-top-left-radius: 15.4px;
            border-top-right-radius: 15.4px;
            padding: 6px 12px;
            background: lighten($color: $background-color, $amount: 5);
            border-bottom: .5px solid rgba($foreground, .2);
            
            label {
                font-family: "Noto Sans Mono", monospace;
                font-size: 11px;
            }
        }
        
        .content {
            padding: 10px;

            .image {
                background-position: center;
                background-size: cover;
                margin-right: 6px;
                border-radius: 12px;
            }

            .text-content {
                
                label.summary {
                    font-size: 16px;
                    font-weight: 700;
                }

                label.body {
                    font-size: 13.3px;
                }

                padding-bottom: 2px;
            }
        }

    }

    & > .bottom {
        padding: 8px;
        margin: 0 8px;

        & .tip {
            background: darken($color: $color1, $amount: 40);
            border-radius: 12px;
            padding: 8px 12px;
            box-shadow: 0 0 0px 1px $background;

            & > .icon {
                margin-right: 4px;
                font-size: 16px;
            }
        }

        & > .right {
            background: darken($color: $color1, $amount: 40);
            border-radius: 12px;
            box-shadow: 0 0 0px 1px $background;

            & .icon {
                margin-right: 4px;
                font-size: 16px;
            }
        }
    }
}