::-webkit-scrollbar {
    width: 6px;
    height: 4px;
    background: rgba(50, 50, 50, 0.6);
}

::-webkit-scrollbar-thumb {
    background: var(--avio-d2);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none;
    padding: 0;
    margin: 0;
    border: 0;
}

.sfondo_pagina,
.contenitore_pagina {
    position: absolute;
    inset: 0;
}

.sfondo_pagina {
    background-image: url(/img/sfondi/sfondoDO.webp);
    background-size: cover;
}

wa-page {
    --menu-width: 30ch;
    --wa-tooltip-arrow-size: 0;
    background-color: var(--wa-color-surface-lowered);
}

wa-page[view='mobile'] {
    --menu-width: auto;

    [slot*='main'],
    main {
        padding: var(--wa-space-xl);
    }
}

wa-page,
[slot='header'],
wa-page[view='desktop'] [slot*='navigation'] {
    background-color: var(--wa-color-surface-lowered);
}

wa-page[view='mobile'] [slot*='navigation'] {
    padding: 0;
}

wa-page::part(base) {
    background-color: var(--wa-color-surface-lowered);
}

[slot='header'] {
    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
}

[slot='navigation-header'],
[slot='main-header'] {
    padding-block-end: 0 !important;
    padding-block-start: var(--wa-space-3xl);
}

[slot='navigation'] {
    a {
        --wa-color-text-link: var(--wa-color-text-normal);
        --wa-link-decoration-default: none;
        --wa-link-decoration-hover: none;
        --flank-size: 2rem;
        font-weight: var(--wa-font-weight-action);
        gap: 0.5rem;
    }

    ul {
        list-style: none;
        margin: 0;

        a {
            border-radius: var(--wa-border-radius-m);
            padding: var(--wa-space-xs);

            &:hover {
                background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
            }
        }
    }

    wa-icon {
        align-items: center;
        aspect-ratio: 1;
        color: var(--wa-color-brand-fill-loud);
        display: flex;
        height: var(--flank-size);
        justify-content: center;
    }

    #recent wa-icon {
        border-radius: var(--wa-border-radius-s);
    }
}

[slot='main-header'] {
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
}

main,
[slot*='main'] {
    margin-inline: var(--wa-space-m);
}

main ol li {
    padding: var(--wa-space-m);

    &:hover {
        background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
    }

    &:not(:first-child) {
        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }

    .wa-flank {
        --flank-size: 2rem;
    }
}

main,
[slot='main-footer'] {
    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

main,
[slot='main-header'] {
    background-color: var(--wa-color-surface-raised);
}

#play-controls wa-icon-button::part(base) {
    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
    border-radius: var(--wa-border-radius-circle);
    font-size: 1.5rem;
}

#play-controls wa-icon-button[name="play"]::part(base) {
    background-color: var(--wa-color-brand-fill-loud);
    border: none;
    color: var(--wa-color-brand-on-loud);
    font-size: 3rem;
    padding: 0.5em 0.45em 0.5em 0.55em;
}

[slot='main-footer'].wa-grid>* {
    max-inline-size: 30ch;
}