@use './variables';
@use './mixins/text-emphasis' as te;

//
// Typography
// --------------------------------------------------

// Headings
// -------------------------

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: variables.$headings-font-family;
    font-weight: variables.$headings-font-weight;
    line-height: variables.$headings-line-height;
    margin: 0;
}

.h1,
.h2,
.h3 {
    margin-bottom: 6px;
}

.h1 {
    font-size: variables.$font-size-h1;
}

.h2 {
    font-size: variables.$font-size-h2;
}

.h3 {
    font-size: variables.$font-size-h3;
}

.h4 {
    font-weight: bold;
    font-size: variables.$font-size-h4;
}

.h5 {
    font-weight: bold;
    font-size: variables.$font-size-h5;
}

.h6 {
    font-size: variables.$font-size-h6;
}

// Body text
// -------------------------

p {
    margin: 0 0 (variables.$line-height-computed * 0.5);
    font-size: 14px;
    line-height: 1.4;

    &.text-large {
        font-size: 16px;
    }

    &.text-upper {
        letter-spacing: 0.5px;
    }
}

// Emphasis & misc
// -------------------------

small,
.small {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

// Alignment
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

// Transformation
.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase,
.text-upper {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@include te.text-emphasis-variant('.text-primary', variables.$brand-primary);

@include te.text-emphasis-variant('.text-success', variables.$state-success-text);

@include te.text-emphasis-variant('.text-info', variables.$state-info-text);

@include te.text-emphasis-variant('.text-warning', variables.$state-warning-text);

@include te.text-emphasis-variant('.text-danger', variables.$state-danger-text);

@include te.text-emphasis-variant('.text-green', variables.$green);

@include te.text-emphasis-variant('.text-yellow', variables.$yellow);

@include te.text-emphasis-variant('.text-verified', #1ccafd); // Twitter color

// Page header
// -------------------------
.page-header {
    border-bottom: 1px solid variables.$divider-color-primary;
    padding: 32px 0 16px 0;
    margin-bottom: 32px;
}

// Lists
// -------------------------

// Unordered and Ordered lists
ul,
ol {
    margin-top: 0;
    margin-bottom: (variables.$line-height-computed * 0.5);

    ul,
    ol {
        margin-bottom: 0;
    }
}

// List options

// [converter] extracted from `.list-unstyled` for libsass compatibility
@mixin list-unstyled {
    padding-left: 0;
    list-style: none;
}

// [converter] extracted as `@mixin list-unstyled` for libsass compatibility
.list-unstyled {
    @include list-unstyled;
}

// Inline turns list items into inline-block
.list-inline {
    @include list-unstyled;
    margin-left: -5px;

    > li {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }
}

// Misc
// -------------------------

// Blockquotes
blockquote {
    padding: (variables.$line-height-computed * 0.5) variables.$line-height-computed;
    margin: 0 0 variables.$line-height-computed;
    font-size: variables.$blockquote-font-size;
    border-left: 5px solid variables.$blockquote-border-color;

    p,
    ul,
    ol {
        &:last-child {
            margin-bottom: 0;
        }
    }

    // Note: Deprecated small and .small as of v3.1.0
    // Context: https://github.com/twbs/bootstrap/issues/11660
    footer,
    small,
    .small {
        display: block;
        font-size: 80%; // back to default font-size
        line-height: variables.$line-height-base;
        color: variables.$blockquote-small-color;

        &:before {
            content: '\2014 \00A0'; // em dash, nbsp
        }
    }
}

// Opposite alignment of blockquote
//
.blockquote-reverse {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid variables.$blockquote-border-color;
    border-left: 0;
    text-align: right;

    // Account for citation
    footer,
    small,
    .small {
        &:before {
            content: '';
        }

        &:after {
            content: '\00A0 \2014'; // nbsp, em dash
        }
    }
}

// Custom interactive text styling
[class*='nw-link-'] {
    text-decoration: none;
    &:hover,
    &:hover:visited,
    &:hover.visited {
        color: variables.$link-hover-color;
        cursor: pointer;
    }
}

.nw-link-primary {
    color: variables.$text-color;

    &:visited,
    &.visited {
        color: variables.$text-color-secondary;
    }
}

.nw-link-secondary {
    color: variables.$text-color-secondary;
}

.nw-link-tertiary {
    color: variables.get-color('primary', x-light);

    &:hover {
        text-decoration: underline;
    }
}

.nw-link-inline {
    &:visited,
    &.visited {
        color: variables.$text-color-secondary;
    }

    @extend .nw-link-tertiary;
}

.nw-text-dark {
    color: variables.get-color('gray');
}