/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import '@spectrum-web-components/styles/tokens/global-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css';
@import '@spectrum-web-components/styles/src/spectrum-heading.css';
@import '@spectrum-web-components/styles/src/spectrum-body.css';
@import '@spectrum-web-components/styles/src/spectrum-code.css';
@import '@spectrum-web-components/opacity-checkerboard/src/spectrum-opacity-checkerboard.css';
@import './inline-alert.css';
@import './fonts.css';

:root,
:host {
    --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro',
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
        'Trebuchet MS', 'Lucida Grande', sans-serif;
    --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro',
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
        'Trebuchet MS', 'Lucida Grande', sans-serif;

    --spectrum-font-family: var(--spectrum-sans-font-family-stack);
    --spectrum-font-style: var(--spectrum-default-font-style);
    --spectrum-font-size: var(--spectrum-font-size-100);

    font-family: var(--spectrum-font-family);
    font-style: var(--spectrum-font-style);
    font-size: var(--spectrum-font-size);
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 961px) {
    docs-page:not(:defined) {
        position: absolute;
        left: 0;
        right: 0;
        min-height: 100vh;
        box-sizing: border-box;
        padding: 92px 0 24px calc(var(--swc-scale-factor) * 192px + 48px);
        background: linear-gradient(
            to right,
            var(--spectrum-gray-75) 0,
            var(--spectrum-gray-75) calc(var(--swc-scale-factor) * 192px + 48px),
            transparent calc(var(--swc-scale-factor) * 192px + 48px),
            transparent
        );
        overflow: hidden;
    }

    docs-page:not(:defined) > * {
        display: block;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 calc(var(--swc-scale-factor) * 56px) 0;
    }

    docs-page:not(:defined) > main {
        box-sizing: border-box;
    }

    docs-page:not(:defined) #logo {
        position: absolute;
        right: calc(100% - var(--swc-scale-factor) * 192px - 48px);
        top: 0;
    }

    docs-page:not(:defined) sp-sidenav {
        position: absolute;
        width: calc(var(--swc-scale-factor) * 192px);
        top: 145px;
        right: calc(100% - var(--swc-scale-factor) * 192px - 48px);
        padding: 0 24px 24px;
        height: calc(100vh - 143px);
    }

    docs-page:not(:defined) sp-tabs {
        padding: 0;
    }

    sp-sidenav:not(:defined) {
        width: calc(var(--swc-scale-factor) * 192px);
    }
}

@media screen and (max-width: 960px) {
    docs-page:not(:defined) {
        display: block;
        padding: 71px calc(var(--swc-scale-factor) * 24px) 24px;
        overflow: hidden;
    }

    docs-page:not(:defined):before {
        content: '';
        position: absolute;
        width: 100%;
        top: 60px;
        border-bottom: 1px solid var(--spectrum-gray-200);
        left: 0;
    }

    docs-page:not(:defined) #logo {
        position: absolute;
        right: 100%;
        top: 0;
    }

    docs-page:not(:defined) > sp-sidenav {
        position: absolute;
        top: auto;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        column-count: 4;
        padding: 0 24px 24px;
    }
}

@media screen and (max-width: 750px) {
    sp-sidenav:not(:defined) {
        column-count: 3;
    }
}

@media screen and (max-width: 500px) {
    sp-sidenav:not(:defined) {
        column-count: 2;
    }
}

@media screen and (max-width: 350px) {
    sp-sidenav:not(:defined) {
        column-count: 1;
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#logo {
    outline: none;
    margin-bottom: -11px;
    padding: calc(var(--swc-scale-factor) * 28px)
        calc(var(--swc-scale-factor) * 24px);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    color: var(--spectrum-gray-800);
    text-decoration: none;
    width: calc(var(--swc-scale-factor) * 192px);
    position: relative;
}

#logo svg {
    width: 36px;
    height: 31px;
    display: block;
    margin-inline-end: var(--spectrum-spacing-300);
    margin-bottom: 12px;
    flex-shrink: 0;
    position: relative;
}

#logo .title {
    font-size: 18px;
    align-items: center;
    font-weight: 700;
    line-height: 1.3;
    font-style: normal;
    letter-spacing: 0;
    margin: -3px 0 0;
    font-family: var(
        --spectrum-alias-body-text-font-family,
        var(--spectrum-font-family)
    );
}

#logo:focus-visible::before {
    content: '';
    position: absolute;
    top: calc((var(--swc-scale-factor) * 28px) - 4px);
    right: calc((var(--swc-scale-factor) * 24px) - 4px);
    bottom: calc((var(--swc-scale-factor) * 28px) - 4px);
    left: calc((var(--swc-scale-factor) * 24px) - 4px);
    border: 2px solid
        var(--spectrum-alias-focus-color, var(--spectrum-blue-400));
    border-radius: 4px;
}

docs-page:not(:defined) #title-header {
    overflow: visible;
}

docs-page:not(:defined) sp-tabs,
sp-tabs:not(:defined) {
    display: block;
    margin-bottom: 2px;
}

sp-tabs:not(:defined) {
    margin-top: calc(
        -1 * var(--spectrum-heading-s-margin-top, var(--spectrum-alias-heading-s-margin-top))
    );
}

sp-tab:not(:defined) {
    color: var(
        --highcontrast-heading-font-color,
        var(--mod-heading-font-color, var(--spectrum-heading-font-color))
    );
    font-family: var(
        --mod-heading-sans-serif-font-family,
        var(--spectrum-heading-sans-serif-font-family)
    );
    font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size));
    font-style: var(
        --mod-heading-sans-serif-font-style,
        var(--spectrum-heading-sans-serif-font-style)
    );
    font-weight: var(
        --mod-heading-sans-serif-font-weight,
        var(--spectrum-heading-sans-serif-font-weight)
    );
    line-height: var(
        --mod-heading-line-height,
        var(--spectrum-heading-line-height)
    );

    --spectrum-heading-font-size: var(--spectrum-heading-size-s);
    --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s);
}

docs-page sp-button:not(:defined) {
    visibility: hidden;
    padding: calc(var(--swc-scale-factor) * 10px) 0
        calc(var(--swc-scale-factor) * 12px);
    line-height: calc(var(--swc-scale-factor) * 23px);
    border: 2px solid;
    display: inline-block;
}

docs-page:not(:defined) code-example {
    color: var(--spectrum-body-3-text-color, var(--spectrum-alias-text-color));
}

sp-sidenav:not(:defined) {
    display: block;
    list-style: none;
}

sp-sidenav-item:not([tabindex]) {
    display: list-item;
    list-style-type: none;
}

docs-page > sp-sidenav-item {
    content-visibility: auto;
    contain-intrinsic-size: 40px;
}

sp-sidenav > sp-sidenav-item.spectrum-web {
    margin-top: 80px;
    display: block;
}

sp-sidenav-item:not(:defined) a,
sp-sidenav-item:not(:defined) span {
    --spectrum-sidenav-focus-ring-size: var(
        --spectrum-focus-indicator-thickness
    );
    --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
    --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
    --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
    --spectrum-sidenav-width: 100%;
    --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
    --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
    --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
    --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
    --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
    --spectrum-sidenav-inline-padding: var(
        --spectrum-component-edge-to-text-100
    );
    --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
    --spectrum-sidenav-top-to-icon: var(
        --spectrum-component-top-to-workflow-icon-100
    );
    --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
    --spectrum-sidenav-bottom-to-label: var(
        --spectrum-side-navigation-bottom-to-text
    );
    --spectrum-sidenav-start-to-content-second-level: var(
        --spectrum-side-navigation-second-level-edge-to-text
    );
    --spectrum-sidenav-start-to-content-third-level: var(
        --spectrum-side-navigation-third-level-edge-to-text
    );
    --spectrum-sidenav-start-to-content-with-icon-second-level: var(
        --spectrum-side-navigation-with-icon-second-level-edge-to-text
    );
    --spectrum-sidenav-start-to-content-with-icon-third-level: var(
        --spectrum-side-navigation-with-icon-third-level-edge-to-text
    );
    --spectrum-sidenav-heading-top-margin: var(
        --spectrum-side-navigation-item-to-header
    );
    --spectrum-sidenav-heading-bottom-margin: var(
        --spectrum-side-navigation-header-to-item
    );
    --spectrum-sidenav-background-disabled: transparent;
    --spectrum-sidenav-background-default: transparent;
    --spectrum-sidenav-background-hover: var(--spectrum-gray-200);
    --spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
    --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
    --spectrum-sidenav-item-background-default-selected: var(
        --spectrum-gray-200
    );
    --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
    --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
    --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
    --spectrum-sidenav-header-color: var(--spectrum-gray-600);
    --spectrum-sidenav-content-disabled-color: var(
        --spectrum-disabled-content-color
    );
    --spectrum-sidenav-content-color-default: var(
        --spectrum-neutral-content-color-default
    );
    --spectrum-sidenav-content-color-hover: var(
        --spectrum-neutral-content-color-hover
    );
    --spectrum-sidenav-content-color-down: var(
        --spectrum-neutral-content-color-down
    );
    --spectrum-sidenav-content-color-key-focus: var(
        --spectrum-neutral-content-color-key-focus
    );
    --spectrum-sidenav-content-color-default-selected: var(
        --spectrum-neutral-content-color-default
    );
    --spectrum-sidenav-content-color-hover-selected: var(
        --spectrum-neutral-content-color-hover
    );
    --spectrum-sidenav-content-color-down-selected: var(
        --spectrum-neutral-content-color-down
    );
    --spectrum-sidenav-content-color-key-focus-selected: var(
        --spectrum-neutral-content-color-key-focus
    );
    --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
    --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
    --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
    --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
    --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100);
    --spectrum-sidenav-top-level-font-family: var(
        --spectrum-sans-font-family-stack
    );
    --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight);
    --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style);
    --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100);
    --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100);
    --spectrum-sidenav-header-font-family: var(
        --spectrum-sans-font-family-stack
    );
    --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight);
    --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style);
    --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75);
    --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100);

    padding-top: var(
        --mod-sidenav-top-to-label,
        var(--spectrum-sidenav-top-to-label)
    );
    background-color: var(
        --highcontrast-sidenav-background-default,
        var(
            --mod-sidenav-background-default,
            var(--spectrum-sidenav-background-default)
        )
    );
    border-radius: var(
        --mod-sidenav-border-radius,
        var(--spectrum-sidenav-border-radius)
    );
    box-sizing: border-box;
    color: var(
        --highcontrast-sidenav-content-color-default,
        var(
            --mod-sidenav-content-color-default,
            var(--spectrum-sidenav-content-color-default)
        )
    );
    cursor: pointer;
    display: inline-flex;
    font-family: var(
        --mod-sidenav-text-font-family,
        var(--spectrum-sidenav-text-font-family)
    );
    font-size: var(
        --mod-sidenav-text-font-size,
        var(--spectrum-sidenav-text-font-size)
    );
    font-style: var(
        --mod-sidenav-text-font-style,
        var(--spectrum-sidenav-text-font-style)
    );
    font-weight: var(
        --mod-sidenav-text-font-weight,
        var(--spectrum-sidenav-text-font-weight)
    );
    hyphens: auto;
    inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width));
    line-height: var(
        --mod-sidenav-text-line-height,
        var(--spectrum-sidenav-text-line-height)
    );
    margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap));
    max-inline-size: var(
        --mod-sidenav-max-width,
        var(--spectrum-sidenav-max-width)
    );
    min-block-size: var(
        --mod-sidenav-min-height,
        var(--spectrum-sidenav-min-height)
    );
    min-inline-size: var(
        --mod-sidenav-min-width,
        var(--spectrum-sidenav-min-width)
    );
    padding-inline: var(
        --mod-sidenav-inline-padding,
        var(--spectrum-sidenav-inline-padding)
    );
    position: relative;
    text-decoration: none;
    transition:
        background-color var(--spectrum-animation-duration-100) ease-out,
        color var(--spectrum-animation-duration-100) ease-out;
    word-break: break-word;
}

sp-sidenav-item:not(:defined) span,
sp-sidenav > sp-sidenav-item[multilevel]:not(:defined) > a {
    font-weight: var(--spectrum-bold-font-weight);
}

sp-sidenav-item:not(:defined) span,
sp-sidenav > sp-sidenav-item:not(:defined) > a {
    padding-left: var(
        --spectrum-sidenav-item-padding-x,
        calc(var(--swc-scale-factor) * 12px)
    );
}

sp-sidenav-item[expanded]
    > sp-sidenav-item[expanded]
    > sp-sidenav-item:not(:defined)
    > a {
    padding-left: calc(
        var(
                --spectrum-sidenav-multilevel-item-indentation-level2,
                calc(var(--swc-scale-factor) * 24px)
            ) +
            var(
                --spectrum-sidenav-item-padding-x,
                calc(var(--swc-scale-factor) * 12px)
            )
    );
}

sp-sidenav-item:not([expanded], :defined) > sp-sidenav-item {
    display: none;
}

sp-sidenav-item:not(:defined) a {
    padding-left: calc(
        var(
                --spectrum-sidenav-multilevel-item-indentation-level1,
                calc(var(--swc-scale-factor) * 12px)
            ) +
            var(
                --spectrum-sidenav-item-padding-x,
                calc(var(--swc-scale-factor) * 12px)
            )
    );
}

docs-page:not(:defined) .header-anchor {
    display: none;
}

sp-divider[size='l']:not(:defined) {
    display: block;
    height: 4px;
}

sp-divider[size='m']:not(:defined) {
    display: block;
    height: 2px;
}

sp-divider[size='s']:not(:defined) {
    display: block;
    height: 2px;
}

.hero {
    margin-bottom: 4em;
}

.hero .spectrum-Heading {
    margin: calc(var(--swc-scale-factor) * 8px) 0
        calc(var(--swc-scale-factor) * 16px) 0;
}

#hero-buttons {
    margin-top: 2em;
}

#features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.feature {
    flex: 0 1 calc(50% - 30px);
    padding: 0 0 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 1100px) {
    .feature {
        flex: 0 1 calc(50% - 30px);
    }

    .feature:first-of-type {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 960px) {
    .feature {
        flex: 0 1 calc(33.33% - 30px);
    }

    .feature:first-of-type {
        flex: 0 1 calc(33.33% - 30px);
    }
}

@media screen and (max-width: 725px) {
    .feature {
        flex: 0 1 calc(50% - 30px);
    }

    .feature:first-of-type {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 525px) {
    .feature {
        flex: 0 1 100%;
    }
}

.example {
    margin-top: 2em;
}

.spectrum-Heading--sizeS {
    margin-bottom: 16px;
}

#title-header {
    margin-bottom: 2rem;
}

#title-header h1,
.hero h1 {
    margin: calc(var(--swc-scale-factor) * 8px) 0;
}

@media screen and (max-width: 768px) {
    #title-header h1,
    .hero h1 {
        font-size: 44px;
        letter-spacing: normal;
    }
}

.spectrum-Body code {
    color: var(--spectrum-blue-700);
}

.spectrum-Article .spectrum-Heading1--display {
    margin-bottom: 28px;
}

.header-heading {
    display: inline !important;
}

.header-anchor {
    padding: 0 0.25rem;
}

.header-anchor:link,
.header-anchor:visited {
    text-decoration: none !important;
}

article {
    margin-bottom: 3em;
}

.table-container > sp-table-body,
.table-container > sp-table-header {
    overflow: visible;
    min-width: max-content;
}

.table-container > sp-table-body {
    --spectrum-table-row-background-color: var(--spectrum-gray-75);
}

.table-container {
    overflow: auto;
    margin: 0 calc(-1 * (var(--swc-scale-factor) * 56px));
}

.table-container > sp-table {
    max-width: 1080px;
    width: min-content;
    padding: 0 calc(var(--swc-scale-factor) * 56px);
    box-sizing: border-box;
    align-items: stretch;
    min-width: 100%;
}

.table-container sp-table-cell,
.table-container sp-table-head-cell {
    box-sizing: border-box;
    word-break: break-word;
    min-width: calc(var(--swc-scale-factor) * 100px);
}

sp-table.attributes sp-table-cell,
sp-table.attributes sp-table-head-cell {
    flex: 0 0 17%;
}

sp-table .description {
    min-width: calc(var(--swc-scale-factor) * 128px);
}

sp-table.attributes .description {
    flex: 1 1 25%;
}

sp-table.slots .description,
sp-table.custom .description {
    flex: 0 1 65%;
}

sp-table.events .description {
    flex: 0 1 40%;
}

@media screen and (max-width: 960px) {
    .table-container {
        overflow: auto;
        margin: 0 -16px;
    }

    .table-container > sp-table {
        padding: 0 16px;
    }
}

.headerContainer > sp-divider[size='l'] {
    margin-bottom: calc(var(--swc-scale-factor) * 24px);
}

.headerContainer:first-child > sp-divider[size='l'] {
    margin-bottom: calc(var(--swc-scale-factor) * 24px);
}

.headerContainer > sp-divider[size='m'] {
    margin-bottom: calc(var(--swc-scale-factor) * 16px);
}

.headerContainer > sp-divider[size='s'] {
    margin-bottom: calc(var(--swc-scale-factor) * 12px);
}

.headerContainer:has([id]) > .header-anchor {
    text-decoration: underline;
    transition: all 125ms ease-in-out;
}

h1[id],
h2[id],
h3[id],
h4[id],
tr[id] {
    scroll-margin-top: calc(var(--swc-scale-factor) * 96px);
    scroll-snap-margin-top: calc(var(--swc-scale-factor) * 96px);
}

/*! purgecss start ignore */
.headerContainer:has([id]):hover > .header-anchor,
.headerContainer:has([id]) > .header-anchor.focus-visible {
    text-decoration: none;
}

sp-link img {
    box-shadow: 0 2px 0 0 transparent;
    transition: box-shadow var(--spectrum-animation-duration-300) ease-in-out;
}

sp-link.focus-visible img {
    box-shadow: 0 2px 0 0
        var(
            --spectrum-fieldbutton-border-color-key-focus,
            var(--spectrum-alias-border-color-focus)
        );
}

sp-link:hover img {
    box-shadow: 0 2px 0 0
        var(
            --spectrum-fieldbutton-text-color-hover,
            var(--spectrum-alias-text-color-hover)
        );
}

img[src^="https://img.shields.io"]
{
    height: 28px;
    min-width: 100px;
}

/*! purgecss end ignore */

.markup,
code-example:not(:defined) {
    position: relative;
    max-width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid var(--spectrum-gray-100);
    background: var(--spectrum-gray-75);
    overflow: hidden;
    line-height: 1.3em;
    overflow-x: auto;
}

code-example:not(:defined) {
    border-radius: 6px;
    display: block;
    margin: 1rem 0 2rem;
    min-height: 86px;
}

code-example[class^='language']:not(:defined) {
    min-height: 164px;
}

code-example:not(:defined) pre {
    background: inherit;
}

code-example {
    --spectrum-dialog-confirm-min-width: 0;

    width: 100%;
    box-sizing: border-box;
}

docs-page:not(:defined) [aria-labelledby='component-name'] {
    display: flex;
    flex-direction: column;
}

docs-page:defined [aria-labelledby='component-name'] {
    display: grid;
    grid-template-columns: 100%;
}

docs-page:defined .section {
    grid-area: 2/1/2/1;
    overflow: hidden;
    opacity: 1;
    height: 100%;
    transition:
        opacity var(--spectrum-animation-duration-300) ease-in-out,
        transform var(--spectrum-animation-duration-300) ease-in-out;
}

docs-page:defined .section:not([selected]) {
    opacity: 0;
    height: 0;
    display: flex;
    pointer-events: none;
    transform: translateY(
        var(
            --spectrum-dropdown-flyout-menu-offset-y,
            calc(var(--swc-scale-factor) * 6px)
        )
    );
    transition:
        opacity var(--spectrum-animation-duration-300) ease-in-out,
        transform var(--spectrum-animation-duration-300) ease-in-out,
        height 0s ease var(--spectrum-animation-duration-300);
}

docs-page:not(:defined) .section,
sp-tabs[selected='overview'] sp-tab[value='api']:not(:defined),
sp-tabs[selected='api'] sp-tab[value='overview']:not(:defined),
sp-tabs[selected='overview'] sp-tab-panel[value='api'],
sp-tabs[selected='api'] sp-tab-panel[value='overview'] {
    order: 2;
}

docs-page:not(:defined) .section[selected],
sp-tabs[selected='overview'] sp-tab[value='overview']:not(:defined),
sp-tabs[selected='api'] sp-tab[value='api']:not(:defined),
sp-tabs[selected='overview'] sp-tab-panel[value='overview'],
sp-tabs[selected='api'] sp-tab-panel[value='api'] {
    order: 1;
}

.docExample {
    margin: 1.2em 0 1.5em;
}

sp-tabs::part(tablist) {
    overflow: auto visible;
    overflow-y: clip;
}

.spectrum-Typography sp-tab-panel .spectrum-Body--sizeM:first-child {
    margin-top: calc(var(--swc-scale-factor) * 24px);
}

main > sp-tabs > sp-tab:only-of-type {
    visibility: hidden;
    width: 0;
}

sp-tab-panel {
    flex-direction: column;
}

sp-tab-panel[selected] {
    display: flex;
}

sp-tab-panel:focus {
    outline: none;
}

sp-tab-panel:not(.section):focus code-example {
    position: relative;
    overflow: hidden;
}

sp-tab-panel:not(.section):focus code-example:after {
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    border-left: calc(var(--swc-scale-factor) * 2px) solid
        var(--spectrum-blue-600);
}

sp-tab-panel.section {
    padding-top: 2rem;
}

.for-github {
    display: none;
}

icons-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    box-sizing: border-box;
    width: 100%;
    border: 2px solid;
    border-radius: 6px;
    padding: 0 1.5rem 0.75rem;
    height: 400px;
    overflow: hidden auto;
    position: relative;
    gap: calc(var(--swc-scale-factor) * 16px);
}

icons-demo::part(search) {
    position: sticky;
    top: 0;
    left: 0;
    margin: 0 -1.5em;
    background: inherit;
    background: var(--spectrum-gray-50);
    padding: 0.75rem 1.5em;
    z-index: 2;
}

icons-demo::part(icon) {
    padding: calc(0.5 * (var(--swc-scale-factor) * 16px)) 0;
    gap: calc(var(--swc-scale-factor) * 16px);
}

custom-vars-viewer:not(:defined) {
    display: block;
    height: 494px;
}

docs-page:not(:defined) {
    background-color: var(--spectrum-gray-50);
    color: var(--spectrum-gray-800);
}

sp-link {
    color: var(--spectrum-accent-content-color-default);
    text-decoration: underline;
}

.demo-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    border: 1px solid rgb(63, 63, 63);
    border-radius: 6px;
}

.demo-control {
    width: 100%;
}

.deprecation-container {
    margin: 2em 0;
}

.demo-container:not(.with-demo) {
    display: none;
}

.demo-container:not(.with-controls) {
    grid-template-columns: 1fr;
}

.demo-preview {
    display: flex;
    min-height: 200px;
    align-items: center;
}

/* Override flex behavior for breadcrumbs so they can properly adjust visible items */
.demo-preview:has(sp-breadcrumbs) {
    display: block;
    padding: 20px;

    --demo-container-width: 100%;
}

/* Override flex behavior for breadcrumbs so they can properly adjust visible items */
.demo-preview:has(sp-breadcrumbs) {
    display: block;
    padding: 20px;

    --demo-container-width: 100%;
}

.demo-config {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid rgb(63, 63, 63);
    padding: 16px;
    max-height: 215px;
    overflow: auto;
    justify-content: start;
}

.control-container {
    margin-bottom: 1rem;
}

.demo-config sp-picker:not(:defined) {
    display: none;
}

.usage-links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    border-radius: 6px;
    margin: 2rem 0 2rem 0;
    container-type: inline-size;
}

.usage-links :is([slot='heading']) {
    all: unset;
}

.usage-links sp-card {
    flex-basis: calc(25% - 16px);
    flex-grow: 1;
}

.component-data sp-icon,
.component-data sp-icon svg {
    width: 36px;
    height: 36px;
}

p:has([alt='See it on NPM!']) {
    display: none;
}

@container (max-width: 848px) {
    .usage-links sp-card {
        flex-basis: calc(50% - 16px);
    }
}

@media screen and (min-width: 600px) {
    .usage-links {
        flex-direction: row;
    }

    .demo-preview {
        height: auto;
    }
}

@media screen and (max-width: 600px) {
    .demo-container {
        grid-template-columns: 1fr;
    }
   }

    .demo-config {
        display: none;
    }
}

@media (scripting: none) {
    .component-data {
        display: none;
    }
}
