.translation-icon {
    line-height: 1;
    width: calc(2em + 1lh);
    height: calc(2em + 1lh);
    aspect-ratio: 1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;

    &.circled {
        border: 2px solid var(--border-color, white);
        width: calc(2em + 1lh - 4px);
        height: calc(2em + 1lh - 4px);
    }

    &.crossed::after, &.noscript-crossed::after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        left: -1px;
        width: calc(100% + 2px);
        height: 0px;
        border-block-start: 2px solid var(--border-color, white);
        transform-origin: center;
        transform: rotate(135deg);
        z-index: 1;
        pointer-events: none;
    }

    @media (scripting: enabled) {
        &.noscript-crossed::after {
            content: unset;
        }
    }

    .icon-wrapper {
        display: grid;
        grid-template-rows: 1em 1em;
        grid-template-columns: 1em 1em;
        aspect-ratio: 1;
        position: relative;

        --connector-color: color-mix(in hsl, white, black 45%);
        --connector-width: 0.26ch; /* 0.25ch is just under 2px and rounds down at 100% zoom. */

        .crossed &, .noscript-crossed & {
            mask-image: linear-gradient(135deg, black, black calc(50% - 3px), transparent calc(50% - 3px), transparent calc(50% + 3px), black calc(50% + 3px), black);
            mask-size: 100% 100%;
        }

        &::before {
            content: '';
            position: absolute;
            inset: calc(25% - var(--connector-width));
            border-radius: 0.25ch;
            border: var(--connector-width) solid var(--connector-color);
            
            mask-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
            mask-origin: border-box;
            mask-size: 100% 50%, 100% 50%;
            mask-position: top left, bottom left;
            mask-repeat: no-repeat;
            mask-mode: alpha;
        }

        @media (scripting: enabled) {
            .noscript-crossed & {
                mask-image: none !important;
            }
        }
    }

    .grapheme-latin, .grapheme-hiragana {
        font-size: 75%;
        padding: 0.2ch;
        border-radius: 0.25ch;
        /* background: color-mix(in hsl, var(--icon-color, white), black 25%); */
        background: white;
        text-align: center;
        color: var(--background-color, black);
        font-weight: 600;

        display: flex;
        align-items: center;
        justify-content: center;

        /** lol */
        text-box-edge: text alphabetic;
        text-box-trim: trim-both;
    }

    .grapheme-latin {
        grid-row: 1;
        grid-column: 1;

        position: relative;
        inset-block-end: -12.5%;
        inset-inline-end: -12.5%;

        z-index: 1;

        /* background: color-mix(in hsl, #1f6feb, black 25%); */
        /* color: color-mix(in hsl, white, black 25%); */

        background: #1f6feb;
        color: white;

        &::before {
            content: 'A' / '';
        }
    }

    .grapheme-hiragana {
        grid-row: 2;
        grid-column: 2;

        position: relative;
        inset-block-start: -12.5%;
        inset-inline-start: -12.5%;

        /** Knockout text. Does weird things to the layering. Revisit eventually. */
        /* mix-blend-mode: lighten;
        color: black; */

        &::before {
            content: 'あ' / '';
        }
    }
}