/*
    Woed Bar
    [2022 Wikidot Component]
    Created by MikuKaneko
    Based on Classified Bar Woed by Woedenaz
    Licensed under the CC-BY SA 3.0
*/

.woed-bar {
    --item: "项目编号：\A";
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-grid;
    display: grid;
    font-size: clamp(1em, -.133rem + 2.13vw, 1.5em);
    -ms-grid-areas: "left center right";
    grid-template-areas: "left center right";
    -ms-grid-columns: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1em auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.woed-bar > div > div {
    white-space: nowrap;
}
.woed-bar .left-box {
    grid-area: left;
    text-align: center;
}
.woed-bar .item::before {
    content: var(--item);
    font-weight: 900;
}
.woed-bar .class {
    background: #333;
    border-radius: 1em;
    color: #fff;
    font-weight: 900;
    margin: .1em auto;
    padding: .1em 0 .2em;
    text-transform: uppercase;
}
.woed-bar.class-safe .class {
    background: green;
}
.woed-bar.class-euclid .class {
    background: yellow;
    color: #333;
}
.woed-bar.class-keter .class {
    background: red;
}
.woed-bar.class-thaumiel .class {
    background: orange;
}
.woed-bar.class-neutralized .class {
    background: gray;
}
.woed-bar.class-explained .class {
    background: lightblue;
    color: #333;
}
.woed-bar .center-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-area: center;
    height: 3em;
    margin: 0 1em;
}
.woed-bar .bar-one,
.woed-bar .bar-two,
.woed-bar .bar-three,
.woed-bar .bar-four,
.woed-bar .bar-five {
    background: #333;
    -webkit-clip-path: polygon(0 0, 50% 0%, 100% 50%, 50% 100%, 0 100%, 50% 50%);
    clip-path: polygon(0 0, 50% 0%, 100% 50%, 50% 100%, 0 100%, 50% 50%);
    margin-left: -.3em;
    width: 1em;
}
.woed-bar .bar-one {
    opacity: .25;
}
.woed-bar .bar-two {
    opacity: .5;
}
.woed-bar .bar-three {
    opacity: .75;
}
.woed-bar .bar-five {
    background: #900;
}
.woed-bar.level-1 .bar-one ~ div,
.woed-bar.level-2 .bar-two ~ div,
.woed-bar.level-3 .bar-three ~ div,
.woed-bar.level-4 .bar-four ~ div {
    display: none;
}
.woed-bar .right-box {
    font-weight: 700;
    grid-area: right;
    text-align: right;
}
.woed-bar .clearance {
    padding: .2em 0;
}