special-pages/pages/release-notes/app/components/ReleaseNotes.module.css
.article {
    /* Component-specific variables */
    --bullet-color: rgba(57, 105, 239, 0.24);
    /* 18px */
    --sp-4_5: calc(18 * var(--px-in-rem));
    /* 10px */
    --sp-2_5: calc(10 * var(--px-in-rem));
    /* 6px */
    --sp-1_5: calc(6 * var(--px-in-rem));

    [data-theme="dark"] & {
        --bullet-color: var(--color-blue-20);
    }

    margin: 0 auto;
    width: 100%;
    display: grid;
    gap: var(--sp-9);
    padding-top: var(--sp-6);
}

.heading {
    display: grid;
    width: 100%;
    gap: var(--sp-2);
}

.card {
    display: grid;
    width: 100%;
    gap: var(--sp-6);
}

.title {
    font-size: calc(50 * var(--px-in-rem));
    font-weight: 800;
    line-height: normal;
}

/* Status */
.statusContainer {
    display: grid;
    width: 100%;
    gap: var(--sp-1) var(--sp-2);
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
}

.gridIcon {
    grid-row: span 2;
}

/* Status Icon */
.statusIcon {
    width: var(--sp-6);
    height: var(--sp-6);
}

.checkIcon {
    background: url(../../../../shared/assets/img/icons/Check-Color-24.svg) no-repeat;
}

.alertIcon {
    background: url(../../../../shared/assets/img/icons/Exclamation-Color-24.svg) no-repeat;
}

.warningIcon {
    background: url(../../../../shared/assets/img/icons/Exclamation-High-Color-24.svg) no-repeat;
}

.spinnerIcon {
    background: url(../../../../shared/assets/img/icons/Spinner-16.svg) no-repeat;
    animation: spinner 1500ms infinite linear;

    [data-theme="dark"] & {
        background-image: url(../../../../shared/assets/img/icons/Spinner-16-Dark.svg);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Status Text */
.statusText {
    align-self: center;
}

.statusTimestamp {
    color: var(--theme-text-secondary-color);
}

/* Restart Button */
.buttonContainer {
    padding-top: var(--sp-1_5)
}

/* Release Notes */
.notesHeading {
    display: grid;
    gap: var(--sp-0_5);
}

.notesSubheading {
    align-items: center;
    display: flex;
    gap: var(--sp-3);
}

.notesIcon {
    background-repeat: no-repeat;
    display: block;
    width: var(--sp-4);
    height: var(--sp-4);
}

.notesIconPrivacyPro {
    background-image: url(../../../../shared/assets/img/icons/Privacy-Pro-Color-16.svg);
}

.releaseTitle {
    align-items: flex-start;
    display: flex;
    font-size: calc(26 * var(--px-in-rem));
    font-weight: 600;
    gap: var(--sp-2);
    line-height: 1;
    letter-spacing: calc(-0.26 * var(--px-in-rem));
}

.releaseVersion {
    color: var(--theme-text-secondary-color);
}

.listContainer {
    display: grid;
    gap: var(--sp-4_5);
    width: 100%;
}

.listGrid {
    display: grid;
    gap: var(--sp-9);
    width: 100%;
}

.list {
    display: grid;
    gap: var(--sp-4_5);
    padding: 0;
    margin: 0;
    width: 100%;

    &:last-of-type {
        margin-bottom: 0;
    }
}

.listItem {
    margin: 0 0 0;
    position: relative;
    padding-left: var(--sp-7);

    &::before {
        background: var(--bullet-color);
        border-radius: var(--sp-1_5);
        content: '';
        display: inline-block;
        width: var(--sp-3);
        height: var(--sp-3);
        position: absolute;
        top: var(--sp-0_5);
        left: var(--sp-0_5);
    }
}

/* New Tag */
.newTag {
    background-color: var(--color-yellow-60);
    border-radius: var(--sp-1_5) 0;
    color: var(--color-black);
    display: inline-block;
    padding: calc(3 * var(--px-in-rem)) var(--sp-2);
    text-transform: uppercase;
    top: calc(-1 * var(--sp-0_5));

    font-size: calc(11.5 * var(--px-in-rem));
    font-weight: 600;
    line-height: calc(11 * var(--px-in-rem));
}

.updatesLink {
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    width: fit-content;
    text-decoration: none;

    &:hover {
        border-bottom-color: currentColor;
    }

    .linkIcon {
        height: 1rem;
        width: 1rem;
        margin-left: var(--sp-1);
        vertical-align: middle;
    }
}
