@layer pages {
    .datasheet-archive-page {
        margin-block-end: var(--me-spacing-40-116);
    }

    .datasheet-archive-page__empty {
        color: var(--me-color-neutral-600);
        font-size: var(--me-font-size-14-18);
    }

    .datasheet-archive-page__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .datasheet-archive-page__item {
        position: relative;

        margin: 0;
        border-block: 1px solid var(--me-color-neutral-500);

        &:not(:last-of-type) {
            border-block-end: 0;
        }

        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: var(--me-spacing-12-20);

        min-block-size: var(--me-min-block-size-40-60);
        padding-block: var(--me-spacing-8-12);
        padding-inline-start: 0;
        padding-inline-end: var(--me-spacing-12-20);

        font-size: var(--me-font-size-16-22);
        text-decoration: none;

        color: var(--me-color-neutral-700);
        font-weight: var(--me-font-weight-primary-semibold);

        transition:
            background-color 120ms ease,
            border-color 120ms ease;

        &:hover,
        &:focus-visible {
            background-color: var(--me-color-neutral-200);
            border-color: var(--me-color-neutral-500);
        }

        &:focus-visible {
            outline: 2px solid var(--me-color-primary-400);
            outline-offset: 2px;
        }
    }

    .datasheet-archive-page__filetype {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .datasheet-archive-page__download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: var(--me-color-primary-400);

        /* Stretch clickable link over the whole list item */
        &::after {
            content: ""/"";
            position: absolute;
            inset: 0;
        }
    }

    .datasheet-archive-page__filetype svg,
    .datasheet-archive-page__download svg {
        inline-size: 1.0909090909em;
        block-size: 1.0909090909em;
    }

    .datasheet-archive-page__title {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }
}