/* general rules */
figure {
    margin: 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

figure.eingang figcaption[data-type] {
    margin: 0.2rem 0;
}


li {
    padding: 0.1rem;
}
li:nth-child(n+2) {
    margin-top: 0.2rem 0;
}

.empty {
    opacity: 0.3;
}

.magenta {
    background-color: var(--magenta);
}
.kingblue {
    background-color: var(--kingblue);
}
.pink {
    background-color: var(--pink);
}
.turquoise {
    background-color: var(--turquoise);
}

#mapbar * {
    color: var(--yellow);
}
#mapbar {
    background-position: right;
    background-size: auto;
    padding: 0.5rem;
    margin: 0.5rem;
    width: calc(var(--card-width) + 1rem);
    max-height: calc(100% - 2rem);
    height: fit-content;
}
#mapbar > .info > .content > figure > ul {
    justify-content: center;
    align-items: center;
}
#mapbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;

}

#result-list {
    overflow-y: auto;
    /* overflow-y: scroll; */
    max-height: 20rem;
}

/* mapbox header with collapse button */
.mapbar-box.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mapbar-box.collapse.btn {
    background: none;
    display: inline-flex;
    border: none;
}
.mapbar-box.collapse.btn:hover {
    cursor: pointer;
}

button.mapbar-box.collapse.btn {
    font-size: 1.5rem;
    font-style: unset;
}
button.mapbar-box.collapse.btn.open::after {
    content: "🧐";
}
button.mapbar-box.collapse.btn.close::after {
    content: "✖";
}
/* mapbar content, will collapse if its class is 'hide' */
.mapbar-box.content {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    /* overflow-y: scroll; */
    max-height: 20rem;
}
.mapbar-box.content.show {
    display: inline-flex;
}
.mapbar-box.content.hide {
    display: none;
}
.mapbar-box:first-of-type {
	  margin-top: 0;
}
.mapbar-box:last-of-type {
    margin-bottom: 0;
}

/* list of layers with checkboxes to control visibility on the map */
li.layer.visibility.ckb {
    display: flex;
    align-items: center;
    flex: 1;
}
li.layer.visibility.ckb span {
    margin-left: 0.5rem;
}
/* .readable-text-dark-bg { */
/*     background: #222a; */
/*     border-radius: 0.1rem; */
/*     padding: 0.2rem 0.3rem; */
/* } */


label.layer.visibility.ckb {
    cursor: pointer;
    display:flex;
    align-items: center;
    padding: 0.1rem;
}

div.layer.visibility.ckb.slider {
    width: 1.5rem;
    height: 1rem;
    background: #999;
    display: block;
    border-radius: 1rem;
    position: relative;
}

div.layer.visibility.ckb.slider div{
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: #00000055;
    border-radius: 1rem;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

input.layer.visibility.ckb {
    height: 0;
    width: 0;
    display: none;
}

input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.magenta {
	  background-color: var(--magenta);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.violet {
	  background-color: var(--violet);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.skyblue {
	  background-color: var(--skyblue);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.pink {
	  background-color: var(--pink);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.turquoise {
	  background-color: var(--turquoise);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb.kingblue {
	  background-color: var(--kingblue);
}
input.layer.visibility.ckb:checked + label.layer.visibility.ckb div.layer.visibility.ckb div{
	  transform: translateX(50%);
}

/* list that shows properties of a feature in the mapbar */
li.feature-property {
    display: flex;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
}
li.feature-property span.prop-key {
    font-size: 0.6rem;
}
li.feature-property span.prop-value {
    margin-left: 0.2rem;
    font-size: 0.8rem;
}
li.feature-property:first-of-type { margin-top: 0; }
li.feature-property:last-of-type  { margin-bottom: 0; }

.blank {
    display: none !important;
}
/* responsiveness */
@media (orientation: portrait) {
    ul.page-checkbox {
        flex-direction: row;
    }
    #mapbar {
        width: 95%;
        max-height: 50%;
    }
    #result-list {
        overflow-y: auto;
    }
}