foundations.scss

::selection {
    background-color: var(--color-brand);
    color: #fff;
}

h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
    background-color: var(--lighter-background-color);
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--outline-color);
    outline-offset: 3px;
}

*.focus-visible {
    outline: 2px solid var(--outline-color);
    outline-offset: 3px;
}

*:focus:not(:focus-visible) {
    outline: 1px solid transparent;
    box-shadow: none;
}

.js-focus-visible *:focus:not(.focus-visible) {
    outline: 1px solid transparent;
    box-shadow: none;
}

input:focus-visible {
    outline: 2px solid var(--link-color);
    border-color: var(--border-color);
}

input:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--link-color);
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    accent-color: var(--link-color);
    background-color: var(--body-background-color);
    height: 100%;
    font-family: var(--text-font);
    overflow-x: hidden;
    caret-color: var(--link-color);
}

body {
    position: relative;
    margin: 0 auto;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--body-background-color);
    color: var(--body-text-color);
}

#skip-link {
    position: fixed;
    top: -30em;
    left: 0;
    right: auto;
    offset-block-start: -30em;
    offset-inline-start: 0;
    offset-inline-end: auto;

    z-index: 999;
    transition: top .1s linear;

    &:focus {
        outline: 2px solid transparent;
        top: 2px;
        offset-block-start: 2px;
    }

    &:focus-visible {
        outline: 2px solid transparent;
        top: 2px;
        offset-block-start: 2px;
    }
}

main {
    flex: 1;

    &:focus {
        outline: none;
    }

    &:target {
        outline: none;
    }
}

hr {
    border: none;
    border-top: 1px solid var(--divider-color);
    border-block-start: 1px solid var(--divider-color);
    background: none;
    height: 0;
    margin: 2rem 0;
}

.content-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--space-xl-3xl) calc(1rem + 1vw);
}


.section-head {
    .section-supporting-text {
        text-align: center;
        max-width: 768px;
        margin: 0 auto var(--space-l-2xl);
    }
}

.section-foot {
    margin-top: var(--space-l-2xl);
    margin-block-start: var(--space-l-2xl);

    .section-supporting-text {
        text-align: center;
        font-size: var(--step--1);
        max-width: 768px;
        margin: 0 auto;
    }
}

.section-title {
    margin-bottom: 1rem;
    margin-block-end: 1rem;
}

.section-supporting-text {
    font-size: var(--step-1);
}


code,
pre {
    font-family: var(--mono-font);
}

code {
    color: var(--link-color);

    pre & {
        color: unset;
    }
}

p:empty {
    display: none;
    margin: 0;
}

.c-icon {
    color: var(--icon-color);
    flex: none;
    transition: all .2s linear;

    @media (-ms-high-contrast: active) {
        color: windowText;
    }

    @media (forced-colors: active) {
        color: canvasText;
    }
}

table {
    width: 100%;
    margin: 2.5rem 0;
    border-collapse: collapse;
    border: 1px solid var(--divider-color);

    td {
        padding: .25rem .5rem;
        border: 1px solid var(--divider-color);
    }

    th {
        background-color: var(--lightest-background-color);
        padding: .25rem .5rem;
    }
}

.c-btn,
button,
a {
    .c-icon:hover {
        color: var(--link-color);
    }
}


a {
    color: var(--link-color);
    transition: color .1s linear;

    .side-header & {
        color: inherit;
        text-decoration: none;
    }
}

svg {
    flex: none;
    transition: color .1s linear;
}

p {
    margin: 0 0 1.5em;

    :matches(nav, .posts-collection) & {
        margin-bottom: .75em;
        margin-block-end: .75em;
    }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}


ul,
ol {
    margin-top: 0;
    margin-block-start: 0;

    li {
        margin: 0 0 .75em;
    }

    .person__bio  & {
        padding-left: 1.5rem;
        padding-inline-start: 1.5rem;
    }
}

.docs-main ul,
.post-main ul,
.docs-main ol,
.post-main ol {
    margin: 1rem 0;
}

ul[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        margin: 0;
    }
}

ol {
    list-style: decimal;

    li::marker {
        color: var(--link-color);
    }
}

p:empty {
    margin: 0;
    display: none;
}

figure {
    margin-bottom: 4rem;
    margin-block-end: 4rem;

    img {
        margin-bottom: 1rem;
        margin-block-end: 1rem;
    }

    figcaption {
        color: var(--grey);
    }
}

img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
}

nav {
    /* rarely do we display bullets for lists in navigation */
    ol,
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}


.video {
    width: 90%;
    max-width: 1400px;
    margin: 2em auto;

    iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    *:focus-visible,
    *.focus-visible {
        transition: outline-offset .15s linear;
        outline-offset: 3px;
    }
}


/* typography */
body {
    font-size: var(--step-0);
    line-height: 1.5;
}

.eyebrow {
    color: var(--link-color);
    font-size: 1rem;
    font-weight: 500;
    display: block;
    margin-bottom: 1.5rem;
    margin-block-end: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--display-font);
    color: var(--headings-color);
    font-weight: 500;
    margin-top: 0;
    margin-block-start: 0;

}

h2,
h3,
h4,
h5,
h6 {

    .docs-main &,
    .components-main & {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        margin-block-start: 3rem;
        margin-block-end: 1.5rem;

        &:first-child {
            margin-top: 0;
            margin-block-start: 0;
        }
    }
}


small,
caption,
cite,
figcaption {
    font-size: var(--step--1);
}

h6,
.h6 {
    font-size: var(--step-0);
}

h5,
.h5 {
    font-size: var(--step-0); // 20
}

h4,
.h4 {
    font-size: var(--step-1); // 24
}

h3,
.h3 {
    font-size: var(--step-2);
    line-height: 1.2;
}

h2,
.h2 {
    font-size: var(--step-3);
    line-height: 1.2;
}

h1,
.h1 {
    font-size: var(--step-4);
    line-height: 1.2;
}

.h0 {
    font-size: var(--step-6);
    line-height: 1.2;
}