.toggle:not(.active) .content {
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    margin: 0 !important;
}

.toggle .content {
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.toggle-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    gap: 1rem;
}

.toggle .toggle-button {
    display: flex;
    width: 100%;
    cursor: pointer;
    font-size: clamp(1.3rem, 5vw, 1.5rem);
    font-weight: 700;
    text-align: left;
    color: inherit;
    gap: 5vw;
    padding: 1rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-pms-process);
    justify-content: space-between;
    outline: var(--outline-width) solid transparent;
    outline-offset: var(--outline-offset);
    opacity: 1;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.toggle .toggle-button:hover {
    opacity: 0.8;
}

.toggle .toggle-button:focus-visible {
    outline-color: var(--color-focus);
}

.toggle .toggle-icon {
    min-width: 1.5rem;
    height: auto;
    transition: all var(--transition);
}

@media(min-width: 1024px) {
    .toggle .content {
        padding-right: 25%;
    }
}