/**
 * 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 url('./markup.css');

:host {
    display: flex;
    margin: 1rem 0 2rem;
    flex-direction: column;
    border-radius: var(--code-example-border-radius);
    border: 1px solid var(--spectrum-gray-100);
    width: 100%;
    position: relative;

    --code-example-border-radius: calc(var(--swc-scale-factor) * 4px);
}

.demo-example {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: auto;
    flex: 1;
    padding: calc(var(--swc-scale-factor) * 32px)
        calc(var(--swc-scale-factor) * 40px);
    border-radius: var(--code-example-border-radius)
        var(--code-example-border-radius) 0 0;
    background: var(--spectrum-gray-100);
}

.demo-example .flex {
    display: flex;
}

@media (max-width: 768px) {
    .demo-example {
        padding: calc(var(--swc-scale-factor) * 16px)
            calc(var(--swc-scale-factor) * 16px);
    }
}

.markup {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(60px, 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);
    line-height: 1.3em;
    position: relative;
    overflow: auto;
}

pre {
    grid-area: 1/1/1/1;
    padding-bottom: calc(0.75rem + var(--swc-scale-factor) * 32px);
}

.copy-holder {
    grid-area: 1/1/1/1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: grid;
    position: sticky;
    left: 0;
    top: 0;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

pre {
    font-family: var(--mod-code-font-family, var(--spectrum-code-font-family));
    font-style: var(--mod-code-font-style, var(--spectrum-code-font-style));
    font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight));
    font-size: var(--mod-code-font-size, var(--spectrum-code-font-size));
    line-height: var(--mod-code-line-height, var(--spectrum-code-line-height));
    color: var(
        --highcontrast-code-font-color,
        var(--mod-code-font-color, var(--spectrum-code-font-color))
    );
}

.copy {
    place-self: end;
    pointer-events: all;
    margin: 0 -1em -0.25em 0;
}
