// ------------------------------
// edX Pattern Library: Components - Headings

// About: Contains base styling for headings (leading type for sections of content and UI).

// #GLOBAL
// #INDIVIDUAL HEADINGS

// ----------------------------
// #GLOBAL
// ----------------------------
.hd-1,
.hd-2,
.hd-3,
.hd-4,
.hd-5,
.hd-6 {
    @extend %reset-headings;

    &.emphasized {
        color: $headings-primary-color;
        font-weight: $headings-font-weight-bold;
    }

    &.de-emphasized {
        color: $headings-secondary-color;
    }
}

.hd-6,
.hd-7 {
    font-weight: $headings-font-weight-bold;
    text-transform: uppercase;

    &.emphasized {
        font-weight: $headings-font-weight-x-bold;
    }
}


// ----------------------------
// #INDIVIDUAL HEADINGS
// ----------------------------
// Level one heading
.hd-1 {
    margin-bottom: spacing-vertical(small);
    font-size: font-size(xxx-large);
    line-height: line-height(xx-large);
}


// Level two heading
.hd-2 {
    margin-bottom: spacing-vertical(small);
    font-size: font-size(xx-large);
    line-height: line-height(x-large);
}


// Level three heading
.hd-3 {
    margin-bottom: spacing-vertical(x-small);
    font-size: font-size(x-large);
    line-height: line-height(large);

    &.de-emphasized {
        color: palette(grayscale, base);
    }
}


// Level four heading
.hd-4 {
    margin-bottom: spacing-vertical(x-small);
    font-weight: font-weight(semi-bold);
    font-size: font-size(large);
    line-height: line-height(mid-small);
}


// Level five heading
.hd-5 {
    margin-bottom: spacing-vertical(x-small);
    font-weight: font-weight(bold);
    font-size: font-size(mid-large);
    line-height: line-height(mid-large);
}


// Level six heading
.hd-6 {
    margin-bottom: spacing-vertical(x-small);
    font-size: font-size(small);
    line-height: line-height(mid-small);
}

// Level seven heading
.hd-7 {
    margin-bottom: spacing-vertical(x-small);
    font-size: font-size(x-small);
    line-height: line-height(small);
}