/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
    --ifm-color-primary: #fb356d;
    --ifm-color-primary-dark: rgb(33, 175, 144);
    --ifm-color-primary-darker: rgb(31, 165, 136);
    --ifm-color-primary-darkest: rgb(26, 136, 112);
    --ifm-color-primary-light: rgb(70, 203, 174);
    --ifm-color-primary-lighter: rgb(102, 212, 189);
    --ifm-color-primary-lightest: rgb(146, 224, 208);
    --ifm-code-font-size: 95%;
}

html {
    overflow-x: hidden;
}

.example-dialog::part(control) {
    --dialog-width: 400px;
    --dialog-height: auto;
    padding: 16px;
}

.button.button--secondary.button--sm.menu__button {
    background: var(--ifm-color-primary);
    color: var(--ifm-color-secondary);
}

/**
 * Any CSS for the front page
 */
.frontpage {
    --body-font: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
    --base-height-multiplier: 10;
    --base-horizontal-spacing-multiplier: 3;
    --control-corner-radius: 4;
    --density: 0;
    --design-unit: 4;
    --direction: ltr;
    --disabled-opacity: 0.3;
    --stroke-width: 1;
    --focus-stroke-width: 2;
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    --type-ramp-minus-2-font-size: 10px;
    --type-ramp-minus-2-line-height: 16px;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 24px;
    --type-ramp-plus-2-font-size: 20px;
    --type-ramp-plus-2-line-height: 28px;
    --type-ramp-plus-3-font-size: 22px;
    --type-ramp-plus-3-line-height: 30px;
    --type-ramp-plus-4-font-size: 28px;
    --type-ramp-plus-4-line-height: 38px;
    --type-ramp-plus-5-font-size: 36px;
    --type-ramp-plus-5-line-height: 46px;
    --type-ramp-plus-6-font-size: 40px;
    --type-ramp-plus-6-line-height: 52px;
    --neutral-color: #808080;
    --accent-color: #da1a5f;
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
    --foreground-on-accent-focus: #ffffff;
    --foreground-on-accent-rest-large: #000000;
    --foreground-on-accent-hover-large: #000000;
    --foreground-on-accent-active-large: #ffffff;
    --foreground-on-accent-focus-large: #000000;
    --neutral-layer-card-container: #101010;
    --neutral-layer-floating: #292929;
    --neutral-layer-1: #181818;
    --neutral-layer-2: #101010;
    --neutral-layer-3: #000000;
    --neutral-layer-4: #000000;
    --fill-color: #181818;
    --accent-fill-rest: #c01754;
    --accent-fill-hover: #da1a5f;
    --accent-fill-active: #a01346;
    --accent-fill-focus: #c01754;
    --accent-foreground-rest: #e1477e;
    --accent-foreground-hover: #e55e8e;
    --accent-foreground-active: #df3874;
    --accent-foreground-focus: #e1477e;
    --neutral-fill-rest: #2b2b2b;
    --neutral-fill-hover: #333333;
    --neutral-fill-active: #262626;
    --neutral-fill-focus: #181818;
    --neutral-fill-input-rest: #181818;
    --neutral-fill-input-hover: #181818;
    --neutral-fill-input-active: #181818;
    --neutral-fill-input-focus: #181818;
    --neutral-fill-stealth-rest: #181818;
    --neutral-fill-stealth-hover: #262626;
    --neutral-fill-stealth-active: #212121;
    --neutral-fill-stealth-focus: #181818;
    --neutral-fill-strong-rest: #838383;
    --neutral-fill-strong-hover: #979797;
    --neutral-fill-strong-active: #767676;
    --neutral-fill-strong-focus: #838383;
    --neutral-fill-layer-rest: #212121;
    --focus-stroke-outer: #717171;
    --focus-stroke-inner: #350617;
    --neutral-foreground-hint: #838383;
    --neutral-foreground-rest: #e5e5e5;
    --neutral-stroke-rest: #5a5a5a;
    --neutral-stroke-hover: #808080;
    --neutral-stroke-active: #424242;
    --neutral-stroke-focus: #5a5a5a;
    --neutral-stroke-divider-rest: #2e2e2e;
    --clear-button-hover: #404040;
    --clear-button-active: #3b3b3b;
    --tree-item-expand-collapse-hover: #333333;
    --tree-item-expand-collapse-selected-hover: #383838;
    --base-layer-luminance: 0.09;
    --wrapper-gutter: 20px;
    --wrapper-max-width: 8px;
    --ifm-link-color: #fb2360;
    background-color: var(--fill-color);
    color: var(--neutral-foreground-rest);
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
    padding: 20px;
    display: grid;
    grid-auto-rows: minmax(0, auto);
    grid-template-columns: 1fr;
}

.section {
    box-sizing: border-box;
    color: var(--neutral-foreground-rest);
    grid-column: span 2;
    margin: var(--section-height-spacing-mobile);
    padding: 20px 0;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.section > svg {
    width: 200px;
}

.section-badge {
    --badge-fill-primary: var(--neutral-fill-focus);
    --badge-color-primary: var(--accent-foreground-rest);
    margin-bottom: calc(var(--base-height-multiplier) * 1px);
    box-sizing: border-box;
    font-family: var(--body-font);
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    display: inline-block;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    text-align: center;
    color: var(--badge-color-primary);
    background-color: var(--badge-fill-primary);
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px);
    border-radius: calc(var(--control-corner-radius) * 1px);
    border: calc(var(--stroke-width) * 1px) solid transparent;
}

.section-heading {
    font-size: var(--type-ramp-plus-5-font-size);
    line-height: var(--type-ramp-plus-5-line-height);
}

.section-paragraph {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
}

.section-heading,
.section-paragraph {
    margin: 0 0 calc(var(--base-height-multiplier) * 2px);
}

.section-decoration {
    border: none;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    height: 58px;
    justify-content: space-between;
    margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px);
}

.section-decoration::after,
.section-decoration::before {
    background-color: var(--accent-fill-rest);
    content: "";
    width: 3px;
}

.section-decoration::before {
    border-radius: 50%;
    height: 3px;
}

.section-decoration:after {
    border-radius: calc(var(--corner-radius) * 1px);
    height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px);
}

.theme-code-block {
    overflow: auto;
    width: inherit;
}

pre {
    text-align: left;
}

li {
    text-align: start;
}

.section-showcase {
    display: flex;
}

.section-showcase-item-link {
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    font-size: var(--type-ramp-base-font-size);
    transition: all 0.3s ease-out 0s;
}

.section-showcase-item svg {
    height: 30px;
    width: 54px;
    fill: white;
    stroke: white;
    margin: 8px 20px;
}

[role="banner"] code {
    background-color: rgba(0, 0, 0, 0.1);
    border: 0.1rem solid rgba(255, 255, 255, 0.1);
}

/**
 * Color contrast overrides
 */

article {
    --ifm-link-decoration: underline;
}

html[data-theme="dark"] {
    --ifm-link-color: #fb356d;
    --ifm-color-primary: var(--ifm-link-color);
    --ifm-breadcrumb-color-active: #fb4b7d;
    --ifm-link-hover-color: #fc4579;
    --ifm-navbar-link-hover-color: #fc4579;
    --ifm-menu-color-active: #fc4579;
}

html[data-theme="light"] {
    --ifm-link-color: #db0054;
    --ifm-color-primary: var(--ifm-link-color);
    --ifm-menu-color-active: var(--ifm-link-color);
    --ifm-breadcrumb-color-active: var(--ifm-link-color);
}

code {
    background: transparent;
}

a code {
    --ifm-link-color: #ff5ac4;
}

html[data-theme="dark"] {
    --ifm-table-stripe-background: #202021;
}

@media screen and (min-width: 900px) {
    .frontpage {
        --type-ramp-base-font-size: 14px;
        --type-ramp-base-line-height: 20px;
        --type-ramp-minus-1-font-size: 12px;
        --type-ramp-minus-1-line-height: 16px;
        --type-ramp-minus-2-font-size: 10px;
        --type-ramp-minus-2-line-height: 16px;
        --type-ramp-plus-1-font-size: 16px;
        --type-ramp-plus-1-line-height: 24px;
        --type-ramp-plus-2-font-size: 20px;
        --type-ramp-plus-2-line-height: 28px;
        --type-ramp-plus-3-font-size: 28px;
        --type-ramp-plus-3-line-height: 36px;
        --type-ramp-plus-4-font-size: 34px;
        --type-ramp-plus-4-line-height: 44px;
        --type-ramp-plus-5-font-size: 46px;
        --type-ramp-plus-5-line-height: 56px;
        --type-ramp-plus-6-font-size: 60px;
        --type-ramp-plus-6-line-height: 72px;
        --wrapper-gutter: 5vw;
        --wrapper-max-width: 800px;
        grid-template-columns:
            minmax(var(--wrapper-gutter), 1fr) minmax(0, var(--wrapper-max-width))
            minmax(var(--wrapper-gutter), 1fr);
    }

    .section,
    .section-decoration {
        grid-column: 2;
    }

    .section {
        margin: var(--section-height-spacing);
        padding: 40px 0;
        max-width: 900px;
    }

    .section-showcase-item svg {
        height: 40px;
        width: 80px;
        margin: 15px 40px;
    }

    .theme-code-block {
        width: unset;
    }
}