/**
 * Heading
 * --
 * This stylesheet is used to format the heading component on the page. These
 * are used at the top of the page as the page title, or used at the top of
 * another component. Headings can be accompanied by a list of actions/buttons
 * which appear to the right of the heading.
 */


.mh-heading {
    padding: 20px;

    &__upper {
        display: flex;
        justify-content: flex-end;
    }

    &__primary {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
    }

    h1.mh-heading__primary { @include type(h1); }
    h2.mh-heading__primary { @include type(h2); }
    h3.mh-heading__primary { @include type(h3); }

    h2.mh-heading__secondary { @include type(h3, $color: $color-font-light); }
    h3.mh-heading__secondary { @include type(large, $color: $color-font-light); }

    &__actions {
        align-items: center;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    &__tabs {
        margin: 20px -20px -20px !important;
    }
}