@layer dialogs {
    dialog[data-id="button-size-dlg"] {
        .items {
            .item {
                position: relative;
                aspect-ratio: 4 / 3;
                cursor: pointer;
                user-select: none;
                width: 140px;

                &.active {
                    outline: 2px solid var(--color-primary);
                }

                & > * {
                    pointer-events: none;
                }

                i {
                    opacity: 0.5;
                }

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

    :root[data-theme="light"] {
        dialog[data-id="button-size-dlg"] {
            .item {
                outline: 1px solid var(--light-outline-color);
            }
        }
    }

    :root[data-theme="dark"] {
        dialog[data-id="button-size-dlg"] {
            .item {
                outline: 1px solid var(--dark-outline-color);
            }
        }
    }
}