// ------------------------------
// edX Pattern Library Site: Layouts

// About: styling for generic layouts and responsive support.

// ------------------------------
// #DOC SITE LAYOUT
// ------------------------------
// header
.pldoc-wrapper-header-site, .pldoc-wrapper-footer-site {
    @extend %grid-wrapper;
}

.pldoc-header-site {
    @include grid-container;
    padding-top: spacing-vertical(x-small);

    .pldoc-header-links {
        @include float(right);
    }
}

.pldoc-header-site-title {
    margin-bottom: 0;
    font-weight: font-weight(bold);

    .pldoc-header-logo {
        @include float(left);
        height: 40px;
        margin-right: spacing-horizontal(small);
        content: url('../images/edx-logo.svg');
    }
}

// content
%grid-wrapper {
    @include padding-left(spacing-horizontal(base));
    @include padding-right(spacing-horizontal(base));
}

.pldoc-wrapper-content {
    @extend %grid-wrapper;
}

.pldoc-content {
    @include grid-container;
    margin-top: spacing-vertical(x-small);
}

// main content
.pldoc-wrapper-content-main {
    padding-top: spacing-vertical(small);

    @media(min-width: $bp-screen-md) {
        @include span(9);
    }

    h1 {
        @extend %hd-3;
        line-height: 1;
        color: palette(primary, dark);
    }

    h2 {
        @extend %hd-4;
        color: palette(primary, dark);
    }
}

// sidebar
.pldoc-wrapper-content-supplemental {
    background-color: palette(grayscale, x-back);
    padding: spacing-vertical(small);
    @include padding-left(0);

    @media(min-width: $bp-screen-md) {
        @include span(3);
    }
}

// pattern
.pldoc-wrapper-pattern {
    border-bottom: rem(2) solid palette(grayscale, back);
    box-shadow: inset spacing-horizontal(xx-small) 0 0 0 $transparent;

    &:last-child {
        border-bottom: none;
    }
}

.pldoc-pattern {
    @include grid-row;
}

.pldoc-pattern-header {
    @include clearfix();

    @media(min-width: $bp-screen-xl) {
        display: flex;
        justify-content: space-between;
    }
}

.pldoc-pattern-title {
    margin-bottom: spacing-vertical(x-small);
    font-size: font-size(xx-large);
    line-height: 1;

    @media(min-width: $bp-screen-xl) {
        flex-grow: 1;
        margin-bottom: 0;
    }
}

.pldoc-pattern-meta {
    .meta-updated {
        margin-bottom: spacing-vertical(x-small);

        @media(min-width: $bp-screen-md) {
            margin-bottom: 0;
        }
    }

    @media(min-width: $bp-screen-xl) {
        flex-grow: 1;
        @include text-align(right);
    }
}

// ------------------------------
// #GENERAL CANVAS LAYOUT
// ------------------------------
.pldoc-view-example {
    // @extend %depth-0;

    .pldoc-wrapper-view-header {
        margin-bottom: spacing-vertical(base);
        padding: spacing-vertical(mid-small);
        @extend %depth-1;
    }

    .pldoc-view-header {
        @include grid-container;

        .pldoc-breadcrumbs,
        .pldoc-view-header-title {
            @include span(12);
        }
    }

    .example {
        margin-bottom: spacing-vertical(base);

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