/* -------------------------------------------------------------- Navigation */

.menu {
    position: fixed;
    top: var(--mm);
    left: var(--mm);
}

/* 
***
* ViewSwitcher
***
*/
.viewSwitcher {
    position: fixed;
    bottom: var(--mm);
    left: var(--mm);
    /* gap: 1px; */
}

.view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--mmmm);
    height: var(--mmmm);
    border: solid 1px transparent;
    cursor: pointer;
}

.view.actif,
.view:hover {
    border: solid 1px var(--main);
}

.view>.label {
    position: absolute;
    top: 0;
    transform: translate(0%, -100%);
    padding-bottom: var(--m);
    font-size: var(--fontSmall);
}

.view:hover>.label,
.view.actif>.label {
    display: flex;
}

.view>.label {
    display: none;
}

.view>.remix,
.view>svg {
    width: var(--mm);
    height: var(--mm);
    font-size: var(--mm) !important;
}

/* 
***
* Surface control
***
*/
.surfaceControl {
    position: fixed;
    bottom: var(--mm);
    right: var(--mm);
    gap: 1px;
}


/* -------------------------------------------------------------- Content */
.appCartography {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: grab;
}

.node {
    cursor: pointer;
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: var(--mm);
    height: var(--mm);
    border: 1px solid var(--main);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: rotate(45deg) scale(1);
    }

    50% {
        transform: rotate(45deg) scale(1.2);
    }

    100% {
        transform: rotate(45deg) scale(1);
    }
}

.pdfLink {
    gap: var(--m);
    align-items: center;
}

.pdfLink view {
    margin-top: 2px;
    width: var(--fontText) !important;
    height: var(--fontText) !important;
}

/* -------------------------------------------------------------- about editor */
.aboutContent>h2 {
    text-transform: uppercase;
}

/* -------------------------------------------------------------- defaultWrapper */
.defaultWrapper {
    position: fixed;
    top: var(--mm);
    left: 50%;
    transform: translate(-50%, 0);

    flex-wrap: nowrap;

    padding: var(--mm) var(--mm) var(--mm) var(--mm);
    gap: var(--m);

    /* arbitrary, based on artist's name */
    width: var(--defaultWrapperW);
    max-height: calc(100dvh - var(--mmmm));
    overflow-y: scroll;
}

.defaultWrapper>.header {
    justify-content: space-between;
    align-items: flex-start;

    /* gap: 0; */
}

.defaultWrapper>.header>h1 {
    width: calc(100% - var(--fontTitle) - var(--mm));
}

.appCloseData {
    position: fixed;
    top: var(--mmmm);
    right: calc((100dvw - var(--defaultWrapperW)) / 2 + var(--mm));
    z-index: 2;
}

.defaultWrapper svg {
    width: var(--fontTitle);
    height: var(--fontTitle);
}

.defaultWrapper .mediaWrapper,
.defaultWrapper .mediaWrapper>img {
    /* based on Figma values */
    max-height: 49dvh !important;
}

/* -------------------------------------------------------------- defaultWrapper swipper */
.defaultWrapper:has(>.swiper) {
    top: 0;
    width: 100dvw;
    height: 100dvh;
    max-height: 100dvh;

    border-radius: 0 !important;
}

.close {
    position: fixed;
    top: var(--m);
    right: var(--mm);

    z-index: 2;
}

/* -------------------------------------------------------------- previewWrapper */
.artworkPreview {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 50%;
    left: var(--mm);
    transform: translate(0%, -50%);

    padding: var(--m);

    /* arbitrary, based on artist's name */
    width: 15.75rem;

    cursor: pointer;
}

.artworkPreview>.header {
    justify-content: space-between;
    align-items: flex-start;
    height: fit-content;
    /* gap: 0; */
}

.artworkPreview>.header>h2 {
    max-width: calc(100% - var(--fontSmall) - var(--mm));
}

.artworkPreview svg {
    width: var(--fontSmall);
    height: var(--fontSmall);
}

.artworkPreview .mediaWrapper {
    /* based on Figma values */
}

.mediaWrapper>img {
    width: auto;
    max-width: 100%;
    /* height: 100%; */
    max-height: 30vh;

    object-fit: contain;
}

p>img {
    display: block;
    width: 60%;
    height: auto;
}

.error404 {
    padding: var(--mm);
}

.error404 h1 {
    width: fit-content;
}

.webCredits {
    position: fixed;
    bottom: calc(2 * var(--m));
    right: calc(11 * var(--m));
}

@media screen and (orientation: portrait) {
    .surfaceControl {
        display: none;
    }

    .webCredits {
        right: var(--m);
        max-width: calc(100dvw - 12 * var(--m) - var(--mmmm));
    }
}