// FONT-SIZES
@each $font-size, $value in $eui-base-tokens-font-sizes {
    .eui-u-font-size-#{$font-size} {
        font-size: #{$value} !important;
    }
}

// FONTS (typographic ingredients like line-height, weight, stretching etc)
@each $family, $sizes in $eui-base-tokens-fonts {
    $family-type: $family + '-';
    @if($family == ui) {
        $family-type: '';
    }

    @each $size, $definition in $sizes {
        .eui-u-font-#{$family-type}#{$size} {
            font: #{$definition} !important;
        }
    }
}

.eui-u-font-regular {
    font-style: normal !important;
    font-weight: normal !important;
}

.eui-u-font-bold {
    font-style: normal !important;
    font-weight: bold !important;
}

.eui-u-font-bold-italic {
    font-style: italic !important;
    font-weight: bold !important;
}

.eui-u-font-italic {
    font-style: italic !important;
    font-weight: normal !important;
}

.eui-u-font-light {
    font-style: normal !important;
    font-weight: 300 !important;
}


// Alignment
.eui-u-text-left         { text-align: left !important; }
.eui-u-text-right        { text-align: right !important; }
.eui-u-text-center       { text-align: center !important; }
.eui-u-text-justify      { text-align: justify !important; }
.eui-u-text-wrap         { white-space: normal !important; }
.eui-u-text-nowrap,      // TODO v16 DEPRECATED
.eui-u-text-no-wrap      { white-space: nowrap !important; }
.eui-u-text-truncate     { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

// Decorations
.eui-u-text-overline     { text-decoration: overline !important; }
.eui-u-text-underline    { text-decoration: underline !important; }
.eui-u-text-line-through { text-decoration: line-through !important; }

// Transformation
.eui-u-text-lowercase    { text-transform: lowercase !important; }
.eui-u-text-uppercase    { text-transform: uppercase !important; }
.eui-u-text-capitalize   { text-transform: capitalize !important; }

// Extra
.eui-u-text-small        { font-size: 80%; }
.eui-u-text-monospace    { @include eui-font-family-monospace; }

.eui-u-text-link {
    color: v(eui-base-color-link) !important;
    cursor: pointer !important;
    text-decoration: none;

    &:focus,
    &:hover {
        text-decoration: underline !important;
    }

    &:focus {
        @include eui-accessible-focus-outline(2px);
    }
}
.eui-u-text-link-external {
    color: v(eui-base-color-link) !important;
    cursor: pointer !important;
    position: relative;
    text-decoration: none;

    &:focus,
    &:hover {
        text-decoration: underline !important;
    }

    &:focus {
        @include eui-accessible-focus-outline(2px);
    }

    &::after {
        @include euiSvgExternalLink();
    }
}
.eui-u-text-highlight {
    padding: v(eui-base-spacing-2xs) !important;
    background-color: v(eui-base-color-accent-10) !important;
}

// TODO v16 - additional classes to document
// HEADINGS
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h7,
.h8,
.h9,
.eui-u-text-h1,
.eui-u-text-h2,
.eui-u-text-h3,
.eui-u-text-h4,
.eui-u-text-h5,
.eui-u-text-h6,
.eui-u-text-h7,
.eui-u-text-h8,
.eui-u-text-h9 {
    @include eui-font-family();
    color: inherit;
}

.h1,
.eui-u-text-h1 {
    @include eui-font(4xl, ui);
    line-height: v(eui-base-line-height);
}
.h2,
.eui-u-text-h2 {
    @include eui-font(3xl, ui);
    line-height: v(eui-base-line-height);
}
.h3,
.eui-u-text-h3 {
    @include eui-font(2xl, ui);
    line-height: v(eui-base-line-height);
}
.h4,
.eui-u-text-h4 {
    @include eui-font(xl, ui);
    line-height: v(eui-base-line-height);
}
.h5,
.eui-u-text-h5 {
    @include eui-font(l, ui);
    line-height: v(eui-base-line-height);
}
.h6,
.eui-u-text-h6 {
    @include eui-font(m, ui);
    line-height: v(eui-base-line-height);
}
.h7,
.eui-u-text-h7,
.eui-u-text-small {
    @include eui-font(s, ui);
    line-height: v(eui-base-line-height);
}
.h8,
.eui-u-text-h8,
.eui-u-text-smaller {
    @include eui-font(xs, ui);
    line-height: v(eui-base-line-height);
}
.h9,
.eui-u-text-h9,
.eui-u-text-smallest,
.eui-u-text-tiny {
    @include eui-font(2xs, ui);
    line-height: v(eui-base-line-height);
}

// TODO v16 - remove of direct html element styling, should be handled within cmp themselves when used or through mixins (for anchor)

// a,
// a:not([href]):not([tabindex]) {
//     color: v(eui-base-color-link);
//     cursor: pointer;

//     &:hover,
//     &:focus {
//         color: v(eui-base-color-link);
//         text-decoration: underline;
//     }
// }

// a {
//     background-color: transparent;
//     text-decoration: none;
// }

// a:focus {
//     text-decoration: underline;
// }

// abbr[title] {
//     text-decoration: none;  // TODO: underline dotted is the default and recommended usage
// }

// .label, abbr, blockquote, del, label, mark, p {
//     font-size: v(eui-base-font-size);
// }

