@use "00-base/configure" as *;

.ma__brand-banner {

    width: 100%;
    background-color: $c-primary-lightest;
    font-size: $fonts-xsmall;
    padding-top: 5px;
    padding-bottom: 5px;

    @include background-colors(
        $lightTheme: (
            "c-primary": $c-primary-lightest,
            "c-primary-alt": $c-primary-alt-lightest,
            "c-highlight": $c-highlight-lightest,
            "c-gray": $c-platinum-gray,
            "c-white": $c-white
        ),
        $darkTheme: (
            "c-primary": $c-primary,
            "c-primary-alt": $c-primary-alt,
            "c-highlight": $c-highlight,
            "c-gray": $c-black,
            "c-black": $c-black
        )
    );

    &-container {

        @include ma-container;
        display: flex;
    }
    
    &-logo {
        height: 20px;
        width: 20px;
        margin-right: 5px;

        &--dark {
            // Filter is not supported in IE. When use the dark theme, you should use the white version of seal instead. 
            filter: brightness(0) invert(1);
        }
    }

    &-button {
       margin-left: 1rem;
    }

    &-expansion {

        @include ma-container;
        display: none;

        &--expanded {
            display: flex;
            flex-direction: column;
        }


        &-item {
            display: flex;
            flex-direction: row;
            flex: 0 1 auto;
            max-width: 500px;

            &-content {
                margin-left: 1rem;
            }

            dt {
                font-weight: $fonts-bold;
            }

            dd {
                margin-left: 0;
            }

            & > svg {
                min-width: 20px;
        
                @media ($bp-small-min) {
                    min-width: 30px;
                }
                   
               }
            
            & + & {
                margin-top: 1rem;
            }
        }

        @media ($bp-small-min) {
            flex-direction: row;

            &-item {

                & + & {
                    margin-left: 1rem;
                    margin-top: 0;
                }
            }
        }
    }
    
}