@layer dialogs {
    [data-id="social-icons-dialog"] {
        h3 {
            text-align: center;
            font-size: 1.2em;
            font-weight: 600;
            margin-bottom: 0.5em;
        }

        .icons {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 6px;
        
            span {
                display: grid;
                place-content: center;
                aspect-ratio: 1;
                width: 100%;
                cursor: pointer;
                user-select: none;
                transform-origin: center;
                transition: all 0.3s;
                border-radius: 50%;
                position: relative;

                img {
                    pointer-events: none;
                }

                &:hover {
                    transform: scale(1.1);
                }

                &.focus {
                    outline: 3px solid var(--color-primary);
                }

                &:active {
                    top: 2px;
                }
            }
        }
    }

    @media screen and (width < 640px) {
        [data-id="icons-dialog"] {
            .icons {
                grid-template-columns: repeat(14, 1fr);
            }
        }    
    }

    @media screen and (840px >= width > 640px) {
        [data-id="icons-dialog"] {
            .icons {
                grid-template-columns: repeat(18, 1fr);
            }
        }    
    }
}