/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />


// Font Sizes
// ==============================================================

.fs-h1          { font-size: $h1-font-size !important; }
.fs-h2          { font-size: $h2-font-size !important; }
.fs-h3          { font-size: $h3-font-size !important; }
.fs-h4          { font-size: $h4-font-size !important; }
.fs-h5          { font-size: $h5-font-size !important; }
.fs-h6          { font-size: $h6-font-size !important; }

.fs-lead        { font-size: $lead-font-size; }

.fs-display-1   { font-size: $display1-size !important; }
.fs-display-2   { font-size: $display2-size !important; }
.fs-display-3   { font-size: $display3-size !important; }
.fs-display-4   { font-size: $display4-size !important; }

.fs-sm, 
.fs-sm a        { font-size: $font-size-sm !important; }
.fs-xs,
.fs-xs a        { font-size: $font-size-xs !important; }


// Font weight Helpers
// ======================================

h1, .h1, h2, .h2 {
    font-weight: $headings-lg-font-weight;
}

h6, .h6 {
	font-weight: $headings-sm-font-weight;
}

@each $weight, $var in (unset, 100, 200, 300, 400, 500, 600, 700, 800, 900) {
    .font-weight-#{$weight} {
        font-weight: $weight !important;
    }
}

.font-weight-light {
    font-weight: $font-weight-light !important;
}

.font-weight-medium {
    font-weight: $font-weight-medium !important;
}


// Heading & Title
// ======================================

.heading {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: ' ';
        width: 100%;
        height: 1px;
        top: 50%;
        z-index: 0;
        background: radial-gradient(ellipse at left, $body-bg 25%, rgba(#000, 0.25) 100%);
    }

    .heading-title {
        position: relative;
        display: inline-block;
        background: $body-bg;
        padding-right: 1rem;
        font-weight: $font-weight-light;
    }
}

.heading-center {
    text-align: center;

    &:before {
        background: radial-gradient(ellipse at center, $body-bg 25%, rgba(#000, 0.25) 100%) !important;
    }

    .heading-title {
        padding-left: 1rem;
    }
}

.page-title {
    margin-bottom: 1.5rem;
}

// Bidi
// ======================================

.rlm:after {
	content: '\200F';
}

.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

.rtl {
	direction: rtl;
	unicode-bidi: isolate;
}


// Misc typo stuff
// ======================================

a.color-body {
    $clr: lighten($body-color, 10%);
    color: $clr;
    text-decoration: none;

    &:hover {
        color: $clr;
        text-decoration: underline;
    }
}

a.pretty-link {
    color: $body-color;
    text-decoration: none;
    font-weight: $font-weight-medium;

    > i { padding-right: 1.2rem; }
    > span {
        color: #aaa;
        &:hover, &:active { color: inherit; }
    }
}

.text-wrap {
    white-space: normal !important;
}

.text-body {
    font-size: $lead-font-size;
}

code {
    background-color: rgba(0,0,0, 0.03);
    border-radius: 2px; 
}