@layer components {
    .logo-generated {
        display: inline-flex;
        align-items: baseline;
        gap: var(--logo-gen-gap, 0);
        font-family: var(--logo-gen-font, var(--font-heading));
        font-weight: var(--logo-gen-weight, var(--font-weight-heading));
        color: var(--logo-gen-color, inherit);
        letter-spacing: var(--logo-gen-letter-spacing, var(--logo-letter-spacing, normal));
        line-height: 1;
        white-space: nowrap;
        aspect-ratio: var(--logo-gen-aspect-ratio, auto);
        border: var(--logo-gen-border, none);
        background: var(--logo-gen-bg, none);
        box-sizing: border-box;
    }

    .logo-generated--column {
        flex-direction: column;
        align-items: var(--logo-gen-align, center);
    }

    .logo-generated--uppercase {
        text-transform: uppercase;
    }

    .logo-generated--italic {
        font-style: italic;
    }

    /* ── Part ── */
    .logo-generated__part {
        font-family: var(--logo-part-font, inherit);
        font-weight: var(--logo-part-weight, inherit);
        color: var(--logo-part-color, inherit);
        font-size: var(--logo-part-size, inherit);
        letter-spacing: var(--logo-part-letter-spacing, inherit);
        margin-inline-start: var(--logo-part-dx, 0px);
        /* Browsers add letter-spacing after the last character too — cancel
           it so it doesn't read as trailing padding. */
        margin-inline-end: calc(var(--logo-part-letter-spacing, var(--logo-gen-letter-spacing, var(--logo-letter-spacing, 0px))) * -1);
        transform: translateY(var(--logo-part-dy, 0)) rotate(var(--logo-part-rotate, 0deg));
    }

    /* Inset from the container's own left edge (e.g. the aspect-ratio/
       border box) — margin, not padding, so negative values are allowed.
       In direction:row only the first part needs it (parts sit inline, one
       inset is enough). In direction:column each line is its own flex item
       starting at the container's left edge independently, so every line
       needs its own inset or the rest would misalign. */
    .logo-generated__part:first-child {
        margin-inline-start: calc(var(--logo-part-dx, 0px) + var(--logo-gen-padding-left, 0px));
    }

    .logo-generated--column > .logo-generated__part {
        margin-inline-start: calc(var(--logo-part-dx, 0px) + var(--logo-gen-padding-left, 0px));
    }

    .logo-generated__part:last-child {
        margin-inline-end: calc(var(--logo-part-letter-spacing, var(--logo-gen-letter-spacing, var(--logo-letter-spacing, 0px))) * -1 + var(--logo-gen-padding-right, 0px));
    }

    .logo-generated--column > .logo-generated__part[style*="--logo-part-letter-spacing"] {
        text-indent: var(--logo-part-letter-spacing);
    }

    .logo-generated__part--bg {
        background: var(--logo-part-bg);
        padding: var(--logo-part-bg-padding, 0.1em 0.3em);
        border-radius: var(--logo-part-bg-radius, 0);
    }

    .logo-generated__part--stroke {
        position: relative;
        -webkit-text-stroke: calc(var(--logo-part-stroke-width, 1px) * 2) var(--logo-part-stroke-color, currentColor);
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--stroke::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        -webkit-text-stroke: 0;
        -webkit-text-fill-color: var(--logo-part-color, var(--logo-gen-color, inherit));
    }

    .logo-generated__part--stroke.logo-generated__part--gradient::after {
        background: var(--logo-part-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--bordered {
        border: var(--logo-part-border);
        padding: var(--logo-part-border-padding, 0.1em 0.3em);
        border-radius: var(--logo-part-border-radius, 0);
    }

    .logo-generated__part--gradient {
        background: var(--logo-part-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .logo-generated__part--uppercase {
        text-transform: uppercase;
    }

    .logo-generated__part--italic {
        font-style: italic;
    }

    .logo-generated__part--no-uppercase {
        text-transform: none;
    }

    .logo-generated__part--no-italic {
        font-style: normal;
    }

    /* ── Separator ── */
    .logo-generated__separator {
        opacity: 0.3;
        margin-inline: var(--logo-gen-gap, 0.2em);
        font-weight: 300;
    }

    /* ── Icon ── */
    .logo-generated__icon {
        display: inline-flex;
        align-items: center;
        color: var(--logo-icon-color, currentColor);
        opacity: var(--logo-icon-opacity, 1);
        margin-inline-end: var(--logo-icon-gap, 0.3em);
    }

    .logo-generated__icon:last-child {
        margin-inline-end: 0;
        margin-inline-start: var(--logo-icon-gap, 0.3em);
    }

    .logo-generated__icon-svg {
        width: var(--logo-icon-size, 1em);
        height: var(--logo-icon-size, 1em);
    }
}