aside.contact-banner
{
    @include content-padding;
    @include button-shadow;

    background-color: $color-background-orange-darkest;
    border-radius: 8px;
    margin-top: steps(4);
    padding: steps(2) steps(4) steps(3);

    &.violet {
        background-color: $color-background-violet-darkest;

        .additional a.customer-centers {
            color: $color-text-inverted-lighter;
        }
    }

    &.ice-blue {
        background-color: $color-background-ice-blue-darkest;
    }

    &.green {
        background-color: $color-background-green-darkest;
    }

    &.yellow {
        background-color: $color-background-yellow-darkest;
    }

    &.orange {
        background-color: $color-background-orange-darkest;
    }

    .svg.benefit
    {
        margin-left: steps(-1);
    }

    .svg.benefit, .svg.benefit > svg
    {
        width: steps(8);
        height: steps(8);
        color: $color-brand-darkest;
    }

    > .heading
    {
        @include normal-heading;

        color: $color-text-inverted-lighter;
        margin-top: steps(1);
        margin-bottom: steps(1);

        @include for-at-least-normal-tablets
        {
            margin-bottom: 0;
            margin-top: steps(1);
        }
    }

    p.primary
    {
        @include font-dimensions(42px, steps(5), -1.4px);

        float: none;
        padding-bottom: 8px;
        margin-right: 0;
        margin-bottom: steps(2);

        .phone
        {
            font: bold steps(6) $accent-font;
            color: $color-text-darkest;
        }

        @include for-desktops
        {
            @include font-dimensions(steps(6), steps(6), -2.3px);
        }
    }

    p.secondary
    {
        @include baseline-box(16px, steps(2),-0.07px);

        overflow: hidden;
        margin-bottom: 0;
        font-weight: bold;
        color: $color-brand-darkest;

        .phone
        {
            @include line-break-before;

            color: $color-text-darkest;
            white-space: nowrap;
        }

        @include for-at-least-normal-tablets
        {
            overflow: visible;

            .phone::before
            {
                content: none;
            }
        }
    }

    p.additional
    {
        @include baseline-box(16px, steps(2.5), -0.07px);

        clear: both;
        font-weight: bold;

        .customer-centers
        {
            @include icon("phone", $color-text-inverted-lighter);
            margin-top: steps(1);
        }

        @include for-at-least-normal-tablets
        {
            clear: none;

            .customer-centers
            {
                margin-left: -5px;
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        margin-left: 0;
        margin-right: 0;
    }

    @include for-desktops
    {
        margin-top: steps(1);
    }
}
