.c-button--collapse-toggle {
    color: theme('colors.primary.500');
    position: relative;
    padding-right: 0;
    padding-left: 0;
    margin: 1rem 0;

    &:hover,
    &:focus {
        color: theme('colors.primary.600');
    }

    &:focus {
        outline: .125rem dotted currentColor;
    }

    .c-icon {
        font-size: 1em;
    }

    .c-icon--down {
        display: inline;
    }

    .c-icon--up {
        display: none;
    }

    &[aria-expanded=true] {
        .c-icon--up {
            display: inline;
        }

        .c-icon--down {
            display: none;
        }
    }
}

.c-collapsible-section {
    height: 0;
    max-height: 0;
    width: 100%;
    visibility: hidden;
    transform-origin: top center;
    transform: scaleY(0);

    &.is-not-collapsed {
        height: auto;
        max-height: none;
        visibility: visible;
        transform: scaleY(1);
        transition: transform .3s, max-height .3s;
        margin-bottom: 1rem;
    }
}
