/* Accordion styles */

:root {
    --digital-nature-accordion-tab-border-width: 2px;
    --digital-nature-accordion-tab-border-style: solid;
    --digital-nature-accordion-tab-border-color: #000;

    --digital-nature-accordion-tab-label-color: #FFF;
    --digital-nature-accordion-tab-label-color-hover: #FFF;
    --digital-nature-accordion-tab-label-bg: #000;
    --digital-nature-accordion-tab-label-bg-hover: #222;
    --digital-nature-accordion-tab-label-open-bg: #222;

    --digital-nature-accordion-tab-content-color: #000;
}

.digital-nature-accordion {
    overflow: hidden;
}

.digital-nature-accordion input[type=radio] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.digital-nature-accordion .tab {
    width: 100%;
    overflow: hidden;
    border-width: var(--digital-nature-accordion-tab-border-width);
    border-style: var(--digital-nature-accordion-tab-border-style);
    border-color: var(--digital-nature-accordion-tab-border-color);
}

.digital-nature-accordion .tab:not(:first-child) {
    border-top: 0;
}

.digital-nature-accordion input[type=radio]+label.tab-label,
.digital-nature-accordion input[type=radio]+label.tab-close {
    margin: 0;
}

/* Label & Icon */
.digital-nature-accordion .tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: var(--digital-nature-accordion-tab-label-bg);
    color: var(--digital-nature-accordion-tab-label-color);
    font-weight: bold;
    cursor: pointer;
}

.digital-nature-accordion .tab-label:hover {
    background: var(--digital-nature-accordion-tab-label-bg-hover);
    color: var(--digital-nature-accordion-tab-label-color-hover);
}

.digital-nature-accordion .tab-content {
    max-height: 0;
    padding: 0 1em;
    color: var(--digital-nature-accordion-tab-content-color);
    background: white;
    transition: all .35s;
    overflow: hidden;
}

.digital-nature-accordion .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: var(--digital-nature-accordion-tab-label-bg);
    cursor: pointer;
}

.digital-nature-accordion .tab-close:hover {
    background: var(--digital-nature-accordion-tab-label-bg-hover);
}

.digital-nature-accordion input:checked + .tab-label {
    background: var(--digital-nature-accordion-tab-label-open-bg);

    border-bottom-width: var(--digital-nature-accordion-tab-border-width);
    border-bottom-style: var(--digital-nature-accordion-tab-border-style);
    border-bottom-color: var(--digital-nature-accordion-tab-border-color);
}

.digital-nature-accordion input:checked + .tab-label .fa-plus {
    opacity: 0;
}

.digital-nature-accordion input:checked ~ .tab-content {
    max-height: 200vh;
    padding: 1em;
}