// Typography // // // //

// // Spacing // h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {

margin-bottom: .5em;

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

}

p, span, b, ul, ol, blockquote {

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

}

// // Global // figure {

margin: 0;

}

strong, b {

color: $canalplus;
font-weight: $font-weight-bold;

}

code {

display: inline-block;
margin-bottom: 1rem;

}

p {

line-height: 1.75em;
color: $gray-300;

}

small {

color: $gray-300;

}

a:hover {

text-decoration: none;

}

hr {

margin-top: 1.875rem;
margin-bottom: 1.875rem;

}

blockquote {

p {
        color: $canalplus;
}

}

// // Decorated // .text-decorated {

position: relative;

&::after {
        content: "";
        position: absolute;
        left: 0;
        top: .6em;
        width: 5rem; // 80px
        height: $border-width;
        background: $canalplus;
        @include translate(-140%,0);
}

&[class*="padding"] {
        padding-left: 6.875rem;

        &::after {
                @include translate(0,0);
        }
}

}

%text-decorated-text-white {

&::after {
        background: $white;
}

}

// // Text Shadow // %text-shadow {

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
p, span, b, i {
        @include text-shadow();
}

}

.text-shadow {

@include text-shadow();

}

// // Styled link // %link {

display: inline-block;
position: relative;

@include hover-focus {
        &::before {
                @include transition();
                top: calc(100% + 2px);
                opacity: 1;
        }
}

&::before {
        @include transition();
        content: "";
        position: absolute;
        top: 100%;
        display: block;
        width: calc(100% - 2px);
        height: $border-width;
        background: currentColor;
        opacity: 0;
}

}

.link {

@extend %link;

}

// Eyebrow %eyebrow {

display: inline-block;
font-size: $font-size-sm;
font-weight: 400;
text-transform: uppercase;
letter-spacing: $letter-spacing;

}

.eyebrow {

@extend %eyebrow;

}

// Error text .error-text {

font-size: 10rem;
font-weight: 700;
line-height: 10rem;
margin-bottom: .25em;

}

.letter-spacing {

letter-spacing: $letter-spacing;

}

// Responsive // //

@include media-breakpoint-down(md) {

.display-1 { font-size: ($display1-size * .65) }
.display-2 { font-size: ($display2-size * .65) }
.display-3 { font-size: ($display3-size * .65) }
.display-4 { font-size: ($display4-size * .65) }
h1, .h1 { font-size: ($h1-font-size * .75) }
h2, .h2 { font-size: ($h2-font-size * .75) }
h3, .h3 { font-size: ($h3-font-size * .75) }
h4, .h4 { font-size: ($h4-font-size * .75) }
h5, .h5 { font-size: ($h5-font-size * .75) }

}