/**
 * Aimeos source code examples
 * @license MIT, https://opensource.org/license/MIT
 */

.aimeos-code > .container {
    width: min(100%, 71.25rem);
    max-width: 71.25rem !important;
    margin-inline: auto;
    padding: 2.75rem min(5%, 2rem);
    text-align: center;
}

.aimeos-code .code-head {
    margin-bottom: 1.5rem;
}

.aimeos-code .code-head h2 {
    margin: 2rem 0 0;
    color: #103050;
    font-size: calc(var(--pico-font-size) * 1.1);
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.aimeos-code .code-head-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-inline: auto;
    color: #B09050;
    filter: drop-shadow(-4px 3px #C2E0FF);
}

.aimeos-code .code-head-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.aimeos-code .code-head-lines {
    display: block;
    width: 7rem;
    height: 0.7rem;
    margin: 0.75rem auto 0;
    color: #BA9A5A;
}

.aimeos-code .code-text {
    max-width: 47rem;
    margin: 1rem auto;
    text-align: start;
    font-size: calc(var(--pico-font-size) * 0.95);
    line-height: 1.65;
}

.aimeos-code .code-text > :last-child {
    margin-bottom: 0;
}

.aimeos-code .code-example {
    max-width: 35rem;
    margin: 3rem auto 0;
    text-align: start;
}

.aimeos-code .code-box {
    padding: 2rem 1rem;
    border: 1px solid #B09050;
}

.aimeos-code .code-panel {
    margin: 1rem;
    padding: 0;
    padding-inline-start: 2.5rem;
    overflow: visible;
    border: 0;
    border-inline-start: 1px solid #103050;
    border-radius: 0;
    color: #103050;
    background: none;
    box-shadow: none;
    font-family: var(--pico-font-family-monospace);
    font-size: calc(var(--pico-font-size) * 0.72);
    line-height: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
    counter-reset: code-line;
}

.aimeos-code .code-panel[hidden] {
    display: none;
}

.aimeos-code .code-panel:focus-visible {
    outline: 2px solid #103050;
    outline-offset: 0.5rem;
}

.aimeos-code .code-panel code {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: none;
    font: inherit;
    white-space: inherit;
}

.aimeos-code .code-line::before {
    display: inline-block;
    box-sizing: border-box;
    width: 2.5rem;
    margin-inline-start: -2.5rem;
    padding-inline-end: 0.75rem;
    color: #4A6078;
    text-align: end;
    counter-increment: code-line;
    content: counter(code-line) ".";
    content: counter(code-line) "." / "";
}

.aimeos-code .code-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    height: 2rem;
}

.aimeos-code .code-tab {
    position: relative;
    top: -2rem;
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #B09050;
    border-radius: 50%;
    color: #103050;
    background-color: #FFFFFF;
    box-shadow: none;
    cursor: pointer;
    transition: top 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.aimeos-code .code-tab:hover {
    border-color: #103050;
}

.aimeos-code .code-tab:focus-visible {
    outline: 2px solid #103050;
    outline-offset: 3px;
}

.aimeos-code .code-tab[aria-selected="true"] {
    top: calc(-2rem - 4px);
    border-color: #B09050;
    color: #FFFFFF;
    background-color: #B09050;
    box-shadow: -6px 4px #C2E0FF;
}

.aimeos-code .code-tab-icon,
.aimeos-code .code-tab-icon img {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    object-fit: contain;
}

.aimeos-code .code-tab[aria-selected="true"] .code-tab-icon img {
    filter: brightness(0) invert(1);
}

.aimeos-code .code-tab-number {
    font-size: calc(var(--pico-font-size) * 1.25);
    font-weight: 700;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    .aimeos-code .code-box {
        padding-inline: 0.25rem;
    }

    .aimeos-code .code-panel {
        margin-inline: 0.5rem;
        padding-inline-start: 2rem;
    }

    .aimeos-code .code-line::before {
        width: 2rem;
        margin-inline-start: -2rem;
        padding-inline-end: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aimeos-code .code-tab {
        transition: none;
    }
}