body > header {
    --headerWidth : 100%;
    width : var(--headerWidth);
    max-width: 100vw;
    height: var(--headerHeight);
    position: fixed;
    top: var(--headerTop);
    right: 0;
    z-index: 35;
    background-color: transparent;
}
body > header .contents {
    --iconScale: 50px;
    position: relative;
    width : 100%;
    height: 100%;
    display: flex;

    flex-direction: row;
    align-items: flex-start;

    box-shadow: var(--baseBoxShadow);

    border-bottom-right-radius: var(--baseRadius);
    border-bottom-left-radius : var(--baseRadius);

    background-color: var(--baseLayeredBg);

    backdrop-filter: var(--baseBdFilter);
    --webkit-backdrop-filter: var(--baseBdFilter);
    
    transition:
    border-radius var(--baseDuration) ease-in-out,
    right         var(--baseDuration) ease-in-out,
    height        var(--baseDuration) ease-in-out,
    box-shadow    var(--baseDuration) ease-in-out,
    transform     var(--baseDuration) ease-in-out;
}
body > header.opened .contents {
    height: calc(min(
        50vh,
        var(--headerHeight) * 2
    ));
    box-shadow: gray 0 0 20px;
}
body > header .contents .items {
    width : max-content;
    height: var(--headerHeight);
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    scrollbar-width: none;
    background-color: transparent;
}
body > header .contents .items::-webkit-scrollbar {
    display: none;
}
body > header .contents .items::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-bottom-right-radius: var(--baseRadius);
    width: calc(
        var(--iconScale) + 5px
    );
    height: var(--headerHeight);
    background: linear-gradient(
        to right,
        transparent 0%,
        white 25%
    );
}
body > header .contents .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    width : var(--iconScale);
    height: var(--iconScale);
    background-color: transparent;
}
@keyframes simpleShowAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
body > header.opened .contents .opened.content {
    pointer-events: auto;
    opacity: 1;
    animation: simpleShowAnim var(--baseDuration) ease-in-out;
}
body > header .contents .opened.content {
    pointer-events: none;
    opacity: 0;
    margin: 0;
    position: absolute;
    --openedContentPadding: 5px;
    width: calc(
        100% - var(--openedContentPadding) * 2
    );
    height: calc(
        100% - var(--headerHeight)
    );
    padding: var(--openedContentPadding);
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition:
    opacity   var(--baseDuration) ease-in-out;
}
body > header .contents .opened.content .bottom.buttons {
    --bottombuttonsGap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min-content;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--bottombuttonsGap);
    padding: var(--bottombuttonsGap);
}
body > header .contents .opened.content .bottom.buttons .buttonset {
    position: relative;
    width : max-content;
    height: max-content;
}
body > header .contents .opened.content .bottom.buttons .buttonset .button {
    position: relative;
}
body > header .contents .opened.content .bottom.buttons .buttonset .dropdowns {
    --dropdownGap: calc(var(--bottombuttonsGap) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--dropdownGap);
    margin-top: var(--dropdownGap);
    position: absolute;
    /* --minRadius: calc(var(--baseRadius) / 4); */
    --minRadius: var(--baseRadius);
}
body > header .contents .opened.content .bottom.buttons .buttonset.opened .dropdowns .button:first-child {
    border-bottom-left-radius: var(--minRadius);
    border-bottom-right-radius: var(--minRadius);
}
body > header .contents .opened.content .bottom.buttons .buttonset.opened .dropdowns .button:last-child {
    border-top-left-radius: var(--minRadius);
    border-top-right-radius: var(--minRadius);
}
body > header .contents .opened.content .bottom.buttons .buttonset .dropdowns .button.invalid {
    pointer-events: none;
}
body > header .contents .opened.content .bottom.buttons .buttonset .dropdowns .button.invalid span {
    opacity: .5;
}
body > header .contents .opened.content .bottom.buttons .buttonset.opened .dropdowns .button {
    animation: simpleShowAnim var(--baseDuration) ease-in-out;
    opacity: 1;
    pointer-events: auto;
}
body > header .contents .opened.content .bottom.buttons .buttonset .dropdowns .button {
    opacity: 0;
    pointer-events: none;
    position: relative;
    background-color: white;
    backdrop-filter: var(--baseBdFilter);
    --webkit-backdrop-filter: var(--baseBdFilter);
}
@keyframes headerOpenedContentbuttonAnim {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    50% {
        opacity: .25;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
body > header .contents .opened.content .item {
    flex-shrink: 0;
    animation:
    headerOpenedContentbuttonAnim calc(var(--baseDuration)) ease-in-out;
    width: max-content;
}
body > header .contents .opened.content .item .button {
    min-width : max-content;
    min-height: max-content;
    width : var(--baseItemWidth);
    height: var(--baseItemHeight);
    overflow: hidden;
    position: relative;
}
body > header .contents .opened.content .item.opened .button {
    width: var(--menuWidth);
    height: var(--menuHeight);
}
body > header .contents .opened.content .item.opened .button .surface {
    opacity: 0;
}
body > header .contents .opened.content .item.opened .menu {
    opacity: 1;
    pointer-events: auto;
}
body > header .contents .opened.content .item .menu {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(var(--basebuttonPadding) / 2);
}
body > header .contents .icon > div {
    --barWidth : 25px;
    --barHeight: 2px;
    position: absolute;
    background-color: var(--baseTextColor);
    border-radius: var(--barHeight);
    width : var(--barWidth);
    height: var(--barHeight);
    transition:
    width     var(--baseDuration) ease-in-out,
    transform var(--baseDuration) ease-in-out;
    --barDif: calc(
        var(--iconScale) * .1
    );
    --barPushedRotate: calc(
        45deg + 90deg
    )
}
body > header.opened .contents .icon > div {
    width: calc(
        var(--barWidth) + 5px
    );
}
body > header .contents .icon > div:first-child {
    transform: rotate(0) translateY(var(--barDif));
}
body > header .contents .icon > div:last-child {
    transform: rotate(0) translateY(calc(
        var(--barDif) * -1
    ));
}
body > header.opened .contents .icon > div:first-child {
    transform: rotate(var(--barPushedRotate));
}
body > header.opened .contents .icon > div:last-child {
    transform: rotate(calc(
        var(--barPushedRotate) * -1
    ));
}
    
body > header .contents .items .item {
    position: relative;
    margin-left: 10px;
    flex-shrink: 0;
}
body > header .contents .items .item:last-child {
    margin-right: var(--iconScale);
}