.frame.version
{
    animation: normal;

    background-color: var(--color-background-white);
    border-radius: var(--border-radius);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--gap);
    padding: var(--padding);
}
.frame.version .frameVersionHeader, .frame.version .versiongroup
{
    background-color: var(--color-background-secondary-IV);
    border-radius: var(--border-radius);
}

.version_space
{
    width: 100%;
    height: 0.3rem;
    border-radius: var(--border-radius);
}

.frameVersionHeader, .versiongroup_content
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
}

.frame.version.internal { color: var(--color-text-secondary); }
.frame.version.internal.mms, .version_space.mms { background-color: var(--color-purple-progress); }
.frame.version.internal.tc, .version_space.tc  { background-color: var(--color-orange); }
.frame.version.internal.unityAssets, .version_space.unityAssets  { background-color: var(--color-cyan); }


.frame.version.mms .frameVersionHeader, .frame.version.mms .versiongroup { border: 1px solid var(--color-purple-progress); }
.frame.version.tc .frameVersionHeader, .frame.version.tc .versiongroup { border: 1px solid var(--color-orange); }
.frame.version.unityAssets .frameVersionHeader, .frame.version.unityAssets .versiongroup { border: 1px solid var(--color-cyan); }
.frame.version.current .frameVersionHeader, .frame.version.current .versiongroup
{
    background-color: var(--color-background-preview);
}

.frameVersionHeader
{
    display: flex;
    padding: var(--padding);
    gap: var(--gap);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    height: 40px;
}

.version_header.frameVersionHeader_element
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    text-align: center;
}

.frame_section_sidepanel_button.frameVersionHeader_element_button
{
    height: 100%;
    max-width: fit-content;
    cursor: default;
}
.frame_section_sidepanel_button.viewmore
{
    cursor: pointer;
}

.frameVersionGroups
{
    display: block;
    
    column-count: 3;

    width: 100%;
    min-height: fit-content;
}

.frame.version.header
{
    display: flex;
    flex: 1;

    height: fit-content;

    border: none;

    flex-direction: column;
    justify-content: center;
    align-self: center;

    text-align: center;
    font-size: var(--font-body);
    font-weight: bold;
    text-transform: uppercase;
}

.version_header
{
    font-weight: bold;
    font-size: var(--font-small);

    text-transform: uppercase;

    display: flex;
    gap: var(--gap);
}

.changelog_extended_button
{
   max-height: calc(100% - 2 * var(--padding));
   padding: calc(var(--padding) / 2) var(--gap);
   
   font-size: var(--font-small-label);
}

.versiongroup_content
{
    break-inside: avoid;
    display: inline-block;
    height: fit-content;
    width: 100%;
}

.versiongroup
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: fit-content;

    gap: calc(0.7 * var(--gap));
    padding: var(--padding);    
}

.versiongroup_header
{
    display: flex;
    flex-wrap: wrap;
    
    width: 100%;
    min-height: 1.5em;

    font-weight: bold;
    font-size: var(--font-small);

    text-align: center;
    justify-content: center;
}
.versiongroup_entry
{
    display: flex;
    flex-wrap: wrap;

    align-items: top;
    justify-content: left;

    width: 100%;
    min-height: 1.5em;
    height: fit-content;
    margin: 0;

    gap: calc(0.3 * var(--gap));

    font-size: var(--font-small);
}

.entrylabel
{
    display: flex;
    flex: 1 0 0;
    align-self: stretch;
    gap: calc(0.2 * var(--gap));
    color: var(--color-text-light-gray);
}
.entrytags
{
    display: flex;
    align-items: center;
    gap: calc(0.2 * var(--gap));
    align-self: stretch;
    width: fit-content;
    max-height: 1.5em;
}

.progress_note
{
    height: auto;
    font-style: italic;
    color: var(--color-text-light);
}

.tag
{
    align-self: flex-end;
    display: flex;
    width: fit-content;
    min-width: 1.4em;
    height: calc(100% - (2 * 0.15 * var(--padding)));

    margin-left: calc(1.5 * var(--padding));
    padding: calc(0.15 * var(--padding)) calc(0.8 * var(--padding));

    align-self: top;
    align-items: center;
    justify-content: center;

    border-radius: calc(0.5 * var(--border-radius));
    background-color: var(--color-background-light-white);


    text-align: center;
    text-transform: uppercase;
    font-size: var(--font-small-label);
    color: var(--color-text-secondary);
}

.offset { padding-left: 1.5em;}

.tag.progress { color: var(--color-text-light-gray); }
.tag.progress::after { content: "%"; }
.tag.done { background-color: var(--color-green); }
.tag.done::after { content: "%"; }

.tag.ui { background-color: var(--color-purple-progress); }
.tag.ui::after { content: "ui"; }
.tag.tool { background-color: var(--color-brown); }
.tag.tool::after { content: "tool"; }
.tag.product { background-color: var(--color-cyan); }
.tag.product::after { content: "product"; }
.tag.furniture { background-color: var(--color-green-dark); }
.tag.furniture::after { content: "furniture"; }
.tag.decoration { background-color: var(--color-green-light); }
.tag.decoration::after { content: "decoration"; }
.tag.animation { background-color: var(--color-blue-light); }
.tag.animation::after { content: "animation"; }
.tag.npc { background-color: var(--color-orange); }
.tag.npc::after { content: "npc"; }
.tag.sound { background-color: var(--color-purple-dark); }
.tag.sound::after { content: "sound"; }
.tag.command { background-color: var(--color-red-dark); }
.tag.command::after { content: "command"; }
.tag.framework { background-color: var(--color-cyan-dark); }
.tag.framework::after { content: "framework"; }

.tag.fix { background-color: var(--color-yellow); }
.tag.fix::after { content: "fix"; }
.tag.fix.critical { background-color: var(--color-red); }