@layer dialogs {
    [data-id="icons-dialog"] {
        .icons {
            display: grid;
            grid-template-columns: repeat(24, 1fr);
            gap: 6px;
        
            span {
                display: grid;
                place-content: center;
                aspect-ratio: 1;
                width: 100%;
                cursor: pointer;
                user-select: none;
                font-family: "8columns";
                font-size: 18px;
                transform-origin: center;
                transition: all 0.3s;

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

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

    @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);
            }
        }    
    }
}