/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 */

.Toggler {
    position: relative;
}

.Toggler-header {
    display: inline-flex;
    align-items: center;
}

.Toggler-title {
    display: inline-block;
    font-weight: bold;
    padding-right: 2rem;
    color: var(--secondary-color);
}
a.Toggler-title {
    text-decoration: none;
}

.Toggler-btn {
    content: '';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: 2px solid var(--secondary-color);
    border-radius: .4rem;
    cursor: pointer;
}
.Toggler-btn::after {
    content: '';
    display: block;
    position: relative;
    top: .1rem;
    border: .4rem solid transparent;
    border-top: .6rem solid var(--secondary-color);
    border-bottom: none;
    transform-origin: center .25rem;
    transition: transform .5s ease;
}
.Toggler.open .Toggler-btn::after {
    transform: rotate(180deg);
}

.Toggler-content {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1rem 0;
    overflow: hidden;
    opacity: 0;
}
.Toggler.init .Toggler-content {
    position: static;
    transition: height 1s ease, padding 1s ease, opacity 1s ease;
}
.Toggler.open .Toggler-content {
    opacity: 1;

}