.tab {
    position: relative;

}

    .tab input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

.tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.1s;
}

.tab input:checked ~ .tab__content {
    max-height:2000rem;
}

/* Visual styles */
.co-accordion {
    color: var(--theme);
    border: 0px solid;
    border-radius: 0rem;
    overflow: hidden;
    min-height: 100vh;
    height:auto;
    -webkit-box-shadow: 5px 0 5px -2px #eee;
    -moz-box-shadow: 5px 0 5px -2px #eee;
    box-shadow: 5px 0 5px -2px #eee;
    margin-left: -10px;
}

.tab__label,
.tab__close {
    display: flex;
    color: #000;
    background: var(--theme);
    cursor: pointer;
}

.tab__label {
    justify-content: space-between;
    padding: 1rem;
}

    .tab__label::after {
        content: "\276F";
        width: 1em;
        height: 1em;
        text-align: center;
        transform: rotate(90deg);
        transition: all 0.35s;
    }

.tab input:checked + .tab__label::after {
    transform: rotate(270deg);
}

.tab__content p {
    margin: 0;
    padding: 1rem;
}

.tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.co-accordion--radio {
    --theme: var(--secondary);
}

/* Arrow animation */
/*.tab input:not(:checked) + .tab__label:hover::after {
    animation: bounce .5s infinite;
}*/

@keyframes bounce {
    25% {
        transform: rotate(90deg) translate(.25rem);
    }

    75% {
        transform: rotate(90deg) translate(-.25rem);
    }
}