/*
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2024 elementary, Inc. (https://elementary.io)
 */

homepage {
    headerbar {
        min-height: rem(32px);
        padding-bottom: rem(3px);
        padding-top: rem(3px);
    }

    .badge {
        font-size: 0.75em;
        margin: rem(3px);
        min-height: rem(14px);
        min-width: rem(14px);

        &:dir(ltr) {
            margin-right: 0;
        }

        &:dir(rtl) {
            margin-left: 0;
        }
    }

    .banner {
        border: 1px solid #{'shade(@banner_bg_color, 0.8)'};
        box-shadow:
            inset 0 0 0 1px #{'alpha(shade(@banner_bg_color, 1.7), 0.05)'},
            inset 0 1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.45)'},
            inset 0 -1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.15)'},
            0 3px 2px -1px #{'alpha(shade(@banner_bg_color, 0.5), 0.2)'},
            0 3px 5px #{'alpha(shade(@banner_bg_color, 0.5), 0.15)'};
        margin: rem(6px) rem(24px);
        padding: rem(64px) rem(24px);

        &:hover {
            box-shadow:
                inset 0 0 0 1px #{'alpha(shade(@banner_bg_color, 1.7), 0.05)'},
                inset 0 1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.45)'},
                inset 0 -1px 0 0 #{'alpha(shade(@banner_bg_color, 1.7), 0.15)'},
                0 10px 8px -11px #{'alpha(shade(@banner_bg_color, 0.6), 0.8)'},
                0 8px 12px #{'alpha(shade(@banner_bg_color, 0.8), 0.6)'};
        }

        image {
            -gtk-icon-size: rem(128px);
            margin-left: -12px; /*Offset space inside icon*/;
            margin-right: -12px; /*Offset space inside icon*/;
        }

        > box {
            border-spacing: rem(24px);
        }

        label.name {
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: -0.04em;
            margin-bottom: -0.1em;
        }

        label.summary {
            font-size: 1.25rem;
            font-weight: 400;
            letter-spacing: -0.035em;
            margin-bottom: 0.75em;
        }

        label.description {
            font-size: 0.95rem;
            opacity: 0.85;
        }
    }
}
