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

::slotted(*) {
    width: 100%;
}

aside {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100vh;
    overflow: auto;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--spectrum-gray-75);
}

@media screen and (max-width: 960px) {
    aside {
        position: fixed;
        top: 0;
        left: 0;
        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-animation-duration-600);
        transform: translateX(-100%);
        z-index: 10;
        min-height: 100vh;
        visibility: hidden;
    }

    [dir='rtl'] + aside {
        right: 0;
        left: auto;
        transform: translateX(100%);
        visibility: hidden;
    }

    :host([open]) aside {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s, 0s;
    }

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

#nav-header a,
#nav-header a:visited {
    color: var(--spectrum-gray-800);
    text-decoration: none;
}

.navigation {
    width: calc(var(--swc-scale-factor) * 240px - 48px);
    padding: 0 24px 24px 24px;
    flex: 1;
    flex-grow: 1;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

docs-spectrum-logo {
    width: 36px;
    height: 32px;
    display: block;
    padding-top: 7px;
}

:host([dir='ltr']) docs-spectrum-logo {
    margin-right: 16px;
}

:host([dir='rtl']) docs-spectrum-logo {
    margin-left: 16px;
}

#logo-container {
    outline: none;
    border-radius: 4px;
}

docs-search {
    width: calc(var(--swc-scale-factor) * 192px);
    padding: 0 calc(var(--swc-scale-factor) * 24px)
        calc(var(--swc-scale-factor) * 24px)
        calc(var(--swc-scale-factor) * 24px);
}

sp-sidenav {
    width: 100%;
}

.spectrum-web {
    margin-top: 80px;
    display: block;
}

sp-underlay:not(:defined) {
    opacity: 0;
}
