share-window {
    display: grid;
    grid-template-rows: auto 1fr auto;

    gap: 5px;

    max-height: 90vh;
    max-width: 90vw;

    @media (min-width:701px) {
        & {
            max-width: 700px;
        }
    }

    & > header {
        grid-row: 1;
    }

    & > section {

        grid-row: 2;

        display: flex;
        flex-wrap: wrap;

        column-gap: 20px;
        row-gap: 10px;

        align-content: start;
        justify-content: start;

        overflow: auto;

        & > a {
            color: inherit;
            margin: 5px;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;

            &[data-hide] {
                display: none;
            }

            & > i.fab {
                &.fa-email,&.fa-gmail,&.fa-hacker-news,&.fa-mail-ru{
                    font: var(--fa-font-solid);
                    &::before {
                        content: "@";
                    }
                }
                &.fa-sms{
                    font: var(--fa-font-solid);
                    &::before {
                        content: "\f7cd";
                    }
                }
                &.fa-social-mail{
                    font: var(--fa-font-solid);
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    justify-items: center;
                    position: relative;
                    &::before {
                        grid-column: 1;
                        grid-row: 1;
                        content: "\f27a";
                    }
                    &::after {
                        grid-column: 1;
                        grid-row: 1;
                        position: absolute;
                        top: 2px;
                        color: white;
                        font-size: x-small;
                        content: "\0040";
                    }
                }
            }
        }
    }

    & > footer {
        margin-top: 20px;
        border-top: solid 1px lightgray;
        padding-top: 20px;
        grid-row: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        & > button, & > a > button {
            padding: 10px;
            border-color: transparent;
            border-radius: 20px;
            padding-left: 20px;
            padding-right: 20px;
            color: var(--accent-text-color, #161616);
            background-color: var(--accent-color, lightgreen);
            cursor: pointer;
        }
    }
}