.c-togglebox {
    padding: 0;
    margin: 0;
}

.c-toggle {
    padding: 1rem 0;
    list-style: none;
    border-bottom: 1px solid theme('colors.gray.300');
}

.o-container--toggle + .o-container--toggle > .c-toggle {
    margin-top: 0;
}

.c-toggle__title {
    display: flex;
    align-items: center;
    font-size: theme('fontSize.xl');
    color: theme('colors.primary.500');
    text-align: left;
    width: 100%;
    font-weight: bold;

    @screen md {
        font-size: 1.375rem;
    }

    &[aria-expanded=true] {
        .c-icon {
            transform: rotate(-180deg) translate(0);
        }
    }

    .c-icon {
        flex: 0 0 auto;
        font-size: 2rem;
        margin-left: auto;
        top: 0;
        transform: rotate(0) translate(0);
        transition: transform $transition-time;
    }


    .c-toggle--uppercase & {
        text-transform: uppercase;
    }
}

.c-toggle__body {
    height: 0;
    margin: 0;
    max-height: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: none;

    [aria-expanded=false] + & {
        * {
            margin: 0;
        }
    }

    [aria-expanded=true] + & {
        height: auto;
        max-height: 200em;
        padding-bottom: .5rem;
        visibility: visible;
        transform: scaleY(1);
        transition: all $transition-time;
        margin: 1rem 0 0;
    }
}
