// This file handles the 'version' element, currently using the indicators feature.

#page-title-versions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 2);
    margin-left: 2vw;
    align-items: center;
    line-height: normal;
}

#page-title-versions > div {
    position: relative;
}

#page-title-versions label {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

#page-title-versions input {
    content: '';
    width: calc(var(--space) *2.5);
    height: calc(var(--space) * 2.5);
    transform: rotate(45deg);
    background: black;
    display: block;
    z-index: -6;
    border: 1px outset var(--gold-1);
    box-sizing: border-box;
    appearance: none;
}

#page-title-versions input:checked {
    box-shadow: 0 0 6px 3px var(--8);
}

#page-title-versions label * {
    height: calc(var(--space) * 2.5);
    width: fit-content;
    display: block;
    text-shadow: 1 1 2px var(--gold-7), 1 -1 2px var(--gold-7), -1 -1 2px var(--gold-7), -1 1 2px var(--gold-7);
    color: var(--gold-1);
    cursor: pointer;
}

#page-title-versions .mw-default-size {
    background: unset;
    border: unset;
    padding: unset;
}

.vdiff {
    display: none;
}

#mw-indicator-mw-helplink#mw-indicator-mw-helplink {
    display: none;
}

#mw-indicator-mw-helplink + .mw-helplink.mw-helplink {
    display: none;
}

// There needs to be at least one of these for each version present on a given page.

body:has(#mw-indicator-1:checked) .vdiff-1 {
    display: inline;
}

body:has(#mw-indicator-2:checked) .vdiff-2 {
    display: inline;
}

body:has(#mw-indicator-3:checked) .vdiff-3 {
    display: inline;
}

body:has(#mw-indicator-4:checked) .vdiff-4 {
    display: inline;
}

body:has(#mw-indicator-5:checked) .vdiff-5 {
    display: inline;
}

body:has(#mw-indicator-6:checked) .vdiff-6 {
    display: inline;
}