.ma__relationship-indicators {

    @include clearfix;
    display: flex;
    flex-direction: column;
    padding: 18px 0;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid $c-bd-divider;
    margin: 0 20px 10px;

    @media ($bp-medium-min) {
        margin-left: 30px;
        margin-right: 30px;
    }

    @media ($bp-large-min) {
        flex-direction: row;
        align-items: flex-start;
        margin-left: 40px;
        margin-right: 40px;
    }

    @media ($bp-centered-content-width) {
        max-width: $l-max-content-wrapper;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    &--label {
        color: $c-font-detail;
        text-transform: uppercase;
        letter-spacing: $letter-spacing-large;
        margin-right: 10px;
        white-space: nowrap;

        @media ($bp-medium-min) {
            padding-top: 6px;
        }
    }

    &--section {
        width: 100%;
        min-width: 50%;
        display: flex;
        flex-direction: column;

        @media ($bp-x-small-min) {
            flex-flow: row nowrap;
        }

        &.primary {
        
            @media ($bp-medium-min) {
                padding-right: 2rem;
            }

            .ma__relationship-indicators--term {

              @media ($bp-medium-max) {

                &:nth-child(n+2) {
                  display: none;
                }
              }
            }

            &.tags-open {
                flex-direction: column;

                @media ($bp-x-small-min) {
                    flex-direction: initial;
                }
            }
        
            // Only hide tags if secondary tags present.

            &:not(.single) .ma__relationship-indicators--term {
              
              &:nth-child(n+2) {
                display: none;
              }
            }

            a {
                color: $c-primary-alt;
                border-color: rgba($c-primary-alt, 0.2);

                &:hover {
                    border-color: $c-primary-alt;
                }
            }

            button {
                color: $c-primary-alt;

                &.is-open {

                    .tag-state {
                        display: inline-block;
                    }
                }

                .tags-open & {
                    align-self: basline;
                }
            }
        }

        &.secondary {
            padding-top: 15px;

            @media ($bp-large-min) {
                padding-top: 0;
            }

            .ma__relationship-indicators--term {

                &:nth-child(n+2) {
                    display: none;
                }
            }

            a {
                border-color: rgba($c-primary, 0.2);

                &:hover {
                    border-color: $c-primary;
                }
            }

            button {
                color: $c-primary;
            }
        }

        a {
            display: block;
            border: 2px solid;
            padding: 1px 5px;
            line-height: 1.2;
            width: 100%;
        
            @media ($bp-x-small-min) {
                width: auto;
                display: inline-block;
            }
        }

        button {

            @include ma-button-reset;

            @include ma-link-underline;

            @include ma-chevron;
            text-transform: capitalize;
            align-self: flex-start;
            margin-top: 5px;
            padding-top: 0;
            padding-left: 0;
            font-size: 1rem;
            font-weight: 600;
            white-space: nowrap;
            display: none;
            
            @media ($bp-small-min) {
                margin-top: 3px;
            }
            
            @media ($bp-medium-min) {
                align-self: baseline;
                margin-top: 8px;
            }
            
            .tag-state {
                text-transform: none;
            }
            
            &:after {
                opacity: 0.5;
                border-width: 3px;
                height: 8px;
                width: 8px;
                transform: translateY(-45%) rotate(45deg);
            }
            
            &.is-open::after {
                transform: translateY(-55%) rotate(-135deg);
            }
        }

    }

    &--terms {
        display: flex;
        flex-direction: column;
        width: 100%;

        @media ($bp-x-small-min) {
            flex-flow: row wrap;
        }
    }

    &--term {
        margin: 0 5px 5px 0;
        width: auto;

        @media ($bp-medium-min) {
            margin-top: 5px;
            margin-bottom: 0;
        }
    }

    & + .ma__illustrated-header,
    & + .ma__page-header,
    & + .ma__page-banner {
        margin-top: -11px;
    }
}