/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_HomePage {
    display: grid;
    place-items: center;
    width: min(100% - 50px, 960px);
    height: 100%;
    margin: 0 auto;
    container-type: inline-size;
    container-name: homepage;
}

.mx_HomePage_default {
    text-align: center;

    img {
        height: 48px;
    }

    h1 {
        margin-bottom: 4px;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: $font-32px;
        line-height: 1.375;
    }

    h2 {
        margin-top: 4px;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: $font-18px;
        line-height: $font-25px;
        color: $muted-fg-color;
    }

    .mx_MiniAvatarUploader {
        margin: 0 auto;
    }

    .mx_HomePage_default_buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px 40px;
        width: 100%;
        margin-top: 80px;
        margin-bottom: 20px;

        .mx_AccessibleButton {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 13px;
            box-sizing: border-box;
            width: 160px;
            min-height: 132px;
            padding: 8px 15px;
            border-radius: 8px;
            font-weight: var(--cpd-font-weight-semibold);
            font-size: $font-15px;
            line-height: $font-20px;
            color: #fff; /* on all themes */
            background-color: $accent;

            svg {
                display: block;
                width: 100%;
                height: 40px;
                object-fit: contain;
                color: #fff; /* on all themes */
            }
        }

        @container homepage (max-width: 559px) {
            grid-template-columns: 1fr;

            .mx_AccessibleButton {
                flex-direction: row;
                width: 100%;
                min-height: 0;

                svg {
                    width: 24px;
                }
            }
        }
    }
}