//
// TYPOGRAPHY - typographic ingredients like text sizes, line-heights, weights, stretching etc.
//

// FONTS
@each $font-size, $def in $eui-base-tokens-fonts {
    .eui-u-font-#{$font-size} {
        font: #{$def} !important;
    }
}

@each $font-size, $def in $eui-base-tokens-fonts-bold {
    .eui-u-font-bold-#{$font-size} {
        font: #{$def} !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;
}
.eui-u-font-monospace {
    font-family: var(--eui-base-font-family-monospace) !important;
}

// Alignments
.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-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;
}
.eui-u-text-link {
    color: v(eui-base-color-link) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    @include eui-accessible-focus(2px);
}
.eui-u-text-link-standalone {
    color: v(eui-base-color-link) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    @include eui-accessible-focus(2px);

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

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

    &::after {
        @include euiSvgExternalLink();
    }

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

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

// Sizes extras
.eui-u-text-small {
    @include eui-font(s);
}
.eui-u-text-smaller {
    @include eui-font(xs);
}
.eui-u-text-smallest,
.eui-u-text-tiny {
    @include eui-font(2xs);
}

// Layout formatting
.eui-u-text-code,
.eui-u-text-kbd,
.eui-u-text-pre,
.eui-u-text-samp {
    @include eui-font-family-monospace;
}

.eui-u-text-code {
    color: v(eui-base-color-extra-code-100);
    word-wrap: break-word !important;
}

.eui-u-text-kbd {
    background-color: v(
        eui-base-color-grey-75
    ) !important; // WCAG2 AA compliant
    border-radius: v(eui-base-border-radius) !important;
    color: v(eui-base-color-white) !important;
    font-size: v(eui-base-font-size-s) !important;
    padding: 1px v(eui-base-spacing-2xs) !important;
}

.eui-u-text-pre {
    color: v(eui-base-color-danger-140) !important;
    display: block !important;
    font-size: 90% !important;
}

.eui-u-text-blockquote {
    border-left: v(eui-base-spacing-2xs) solid v(eui-base-color-grey-25) !important;
    padding: v(eui-base-spacing-xs) v(eui-base-spacing-m) !important;
}

.eui-u-text-mark {
    background-color: v(eui-base-color-accent-25) !important;
    padding: v(eui-base-spacing-2xs) !important;
}

.eui-u-text-highlight {
    padding: v(eui-base-spacing-2xs) !important;
    background-color: v(eui-base-color-accent-10) !important;
}
.eui-u-text-paragraph {
    @include eui-font(m);
    // No need as eui-font defs is already setting the line-height of it, otherwise paragraphs appears way to compressed
    // margin-block-start: v(eui-base-spacing-xs) !important;
    // margin-block-end: v(eui-base-spacing-xs) !important;
    // &:first-child {
    //     margin-block-start: 0px !important;
    // }
    // &:last-child {
    //     margin-block-end: 0px !important;
    // }
}
.eui-u-text-list {
    padding-inline-start: v(eui-base-spacing-2xl) !important;
}
.eui-u-text-list-item {
    margin-block-start: v(eui-base-spacing-2xs) !important;
    margin-block-end: v(eui-base-spacing-2xs) !important;
}

// HEADINGS
.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();
}

.eui-u-text-h1 {
    @include eui-font(4xl);
}
.eui-u-text-h2 {
    @include eui-font(3xl);
}
.eui-u-text-h3 {
    @include eui-font(2xl);
}
.eui-u-text-h4 {
    @include eui-font(xl);
}
.eui-u-text-h5 {
    @include eui-font(l);
}
.eui-u-text-h6 {
    @include eui-font(m);
}
.eui-u-text-h7 {
    @include eui-font(s);
}
.eui-u-text-h8 {
    @include eui-font(xs);
}
.eui-u-text-h9 {
    @include eui-font(2xs);
}

// MISC
.eui-u-hr {
    border-style: ridge !important;
    width: 100% !important;
}
