/* The button drops under the text when the row runs out of room, and the two gaps the
   design draws are the two the shorthand already carries: 12px between the stacked
   lines, 20px between text and button side by side. */
.download-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;

    /* One line of text stands centred against the button, two start with it at the top —
       which is the row without and with a source. */
    &:has(.download-item__source) {
        align-items: flex-start;
    }

    /* `[hidden]` is a user agent rule and loses to the author `display` above. */
    &[hidden] {
        display: none;
    }
}

.download-item__text {
    /* The width a line still reads at, and with it the point the button drops below. */
    flex: 1 1 20rem;
    min-inline-size: 0;
    font-weight: var(--sav-font-weight-light);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    letter-spacing: normal;
}

.download-item__source {
    display: block;
}

/* Not the button component: the design shows its glyph at rest instead of sliding it in
   on hover, and sets a taller pill. */
.download-item__link {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.625rem;
    inline-size: fit-content;
    /* 36px → 48px */
    block-size: clamp(2.25rem, 2.0421rem + 0.8869vw, 3rem);
    padding-inline: 1.25rem;
    border: 1px solid var(--sav-color-dunkelblau);
    border-radius: 3.125rem;
    background-color: var(--sav-color-dunkelblau);
    color: var(--sav-color-weiss);
    font-size: var(--sav-text-xs-size);
    /* 0.2 → 0.5px: it widens faster than the label grows, so it is not a share of the size. */
    letter-spacing: clamp(0.2px, 0.1169px + 0.0222vw, 0.5px);
    text-decoration: none;

    @media (prefers-reduced-motion: no-preference) {
        transition:
            background-color 0.2s,
            border-color 0.2s;
    }

    &:hover,
    &:active {
        border-color: var(--sav-color-dunkelblau-hover);
        background-color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* 16px → 20px */
    .icon {
        flex: none;
        inline-size: clamp(1rem, 0.9307rem + 0.2956vw, 1.25rem);
        block-size: clamp(1rem, 0.9307rem + 0.2956vw, 1.25rem);
    }
}