/**
 * 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.
 */

:host {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
}

#app {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

docs-side-nav:not(:defined) {
    display: none;
}

@media screen and (min-width: 961px) {
    docs-side-nav:not(:defined) {
        position: sticky;
        top: 0;
        left: 0;
        padding: 0 24px 24px;
        background-color: var(--spectrum-gray-75);
        max-width: calc(var(--swc-scale-factor) * 192px);
        max-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    docs-side-nav:not(:defined) ::slotted([slot='logo']) {
        margin: 0 -24px;
    }

    docs-side-nav:not(:defined) ::slotted([slot='side-nav']) {
        margin-top: 56px;
        width: 216px;
        flex: 1;
        flex-grow: 1;
    }
}

#body {
    display: grid;
    grid-template-columns: auto calc(100% - var(--swc-scale-factor) * 240px);
    flex: 1 1 auto;
    color: var(--spectrum-gray-800);
    background-color: var(--spectrum-gray-50);
}

@media screen and (max-width: 960px) {
    #body {
        height: 50%;
        grid-template-columns: 100%;
    }
}

#page {
    padding: calc(var(--swc-scale-factor) * 40px)
        calc(var(--swc-scale-factor) * 56px);
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.manage-theme {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-end;
    min-height: 52px;
}

.theme-control {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 960px) {
    #page {
        padding: calc(var(--swc-scale-factor) * 8px)
            calc(var(--swc-scale-factor) * 24px);
    }

    .manage-theme {
        margin-right: 0;
        margin-left: 0;
    }
}

@media screen and (min-width: 525px) {
    .manage-theme {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
}

header {
    position: sticky;
    top: 0;
    left: 0;
    min-height: calc(var(--swc-scale-factor) * 48px);
    border-bottom: 1px solid var(--spectrum-gray-200);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--spectrum-gray-50);
    top: 0px;
    right: 0px;
    left: 0px;
    padding-inline: 8px;
    z-index: 2;

    --spectrum-actionbutton-height: calc(var(--swc-scale-factor) * 40px);
    --spectrum-actionbutton-min-width: calc(var(--swc-scale-factor) * 40px);
    --spectrum-alias-workflow-icon-size: 22px;
}

header svg {
    stroke: transparent;
    height: 100%;
}

.theme-control {
    margin-inline-start: calc(var(--swc-scale-factor) * 32px);
}

sp-field-label:not(:defined) {
    height: calc(
        var(
                --spectrum-fieldlabel-m-text-line-height,
                var(--spectrum-alias-component-text-line-height)
            ) +
            var(
                --spectrum-fieldlabel-m-padding-top,
                calc(var(--swc-scale-factor) * 4px)
            ) +
            var(
                --spectrum-fieldlabel-m-padding-bottom,
                calc(var(--swc-scale-factor) * 5px)
            )
    );
    min-width: 70px;
}

sp-picker:not(:defined) {
    height: var(
        --spectrum-picker-m-height,
        var(--spectrum-alias-item-height-m)
    );
    min-width: 70px;
}

sp-picker:not(:defined) sp-menu-item {
    display: none;
}

@media screen and (min-width: 961px) {
    header {
        display: none;
    }
}

.alerts {
    width: 100vw;
    text-align: center;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.alerts sp-toast {
    margin: 0 auto calc(var(--swc-scale-factor) * 24px);
}

#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);
}

#logo docs-spectrum-logo {
    width: 36px;
    height: 31px;
    display: block;
    margin-right: calc(var(--swc-scale-factor) * 16px);
    margin-bottom: 12px;
    flex-shrink: 0;
}

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

#logo span {
    white-space: nowrap;
}

aside {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: var(--spectrum-gray-75);
    width: calc(var(--swc-scale-factor) * 192px);
    transition:
        transform
            var(
                --spectrum-dialog-confirm-background-entry-animation-duration,
                var(--spectrum-animation-duration-600)
            )
            cubic-bezier(0, 0, 0.4, 1),
        visibility 0s linear
            var(
                --spectrum-dialog-confirm-background-entry-animation-duration,
                var(--spectrum-animation-duration-600)
            );
    visibility: visible;
}

aside .manage-theme {
    flex-direction: column;
    display: flex;
    padding: 0px 24px 24px;
    order: 1;
}

.scrim {
    z-index: 10;
    touch-action: none;
    position: fixed;
}

aside header {
    background: none;
    border-color: transparent;
    padding-inline: 8px;
    justify-content: end;
}

aside .theme-control {
    margin: 0 0 calc(var(--swc-scale-factor) * 24px);
}

sp-underlay[open] + aside {
    transition-delay: 0ms, 0ms;
    visibility: visible;
}

sp-underlay:not([open]) + aside {
    transform: translateX(100%);
    visibility: hidden;
}

:host([dir='rtl']) aside {
    left: 0;
    right: auto;
}

:host([dir='rtl']) sp-underlay:not([open]) + aside {
    transform: translateX(-100%);
}
