
/* AdminUI page cover

Example: {type: isolated} Minimal example

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
    </header>

Example: {type: isolated} With description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description">The description</p>
    </header>

Example: {type: isolated} With large description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description  adminui-page-cover__description--large">The description</p>
    </header>

Example: {type: isolated} With inline elements in description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description">
            The <strong class="adminui-page-cover__strong">awesome</strong>
            <a class="adminui-page-cover__link">description</a>
        </p>
    </header>

Styleguide layout.adminui.adminui-page-cover
*/
.adminui-page-cover {
    position: relative;
    padding-top: $spacing; // TODO: Vertical variables...
    padding-bottom: $spacing; // TODO: Vertical variables...
    text-align: center;
    color: $color-light;
    background-color: color(primary);

    @media print {
        background-color: transparent;
        color: #000;
    }

    @include min-width(md) {
        padding-top: $vertical-rythm--spacing;
        padding-bottom: $vertical-rythm--spacing;
    }

    &__title {
        position: relative;
        @include container(wide);
        z-index: 2;
        width: 100%;
        max-width: $container-width;
        margin-bottom: $spacing--small;
        @include font-size(xlarge);

        &--small {
            @include font-size(large);
        }

        &:only-child {
            margin-bottom: 0;
        }
    }

    &__description {
        @include container(tight);
        @include font(base, bold);
        @include font-size(small);
        position: relative;
        z-index: 2;
        max-width: $container-width--tight + ($spacing * 2);
        padding: 0;
        margin-bottom: $spacing--small;

        &--large {
            @include font-size(large);
            @include spaced-text;
        }
    }

    &__strong {
        @include font(base, bold);
        display: inline-block;
        padding: 0 $unit 2px;
        margin: 0 -2px;
        background-color: color(primary, dark);
    }
    &__link {
        color: $color-light;
        border-color: color(primary, dark);
        &:hover,
        &:focus {
            color: $color-light;
            border-color: $color-light;
        }
    }
}
