@use 'sass:map';
@use '../02-tokens/typography-primitive' as typography-primitives;
@use '../02-tokens/typography-semantic' as typography-semantic;

@each $font, $def in typography-primitives.$font-weight-map {
    .eds-u-f-weight-#{$font} {
        font-weight: var(--eds-f-w-#{$font}) !important;
    }
}
@each $font, $def in typography-primitives.$font-size-map {
    .eds-u-f-size-#{$font} {
        font-size: var(--eds-f-s-#{$font}) !important;
    }
}

@each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
    @each $size, $sizeDef in $typeDef {
        .eds-u-f-#{$type}-#{$size} {
            font: var(--eds-f-#{$type}-#{$size}) !important;
            letter-spacing: var(--eds-f-ls-#{map.get($sizeDef, 'size')}) !important;
        }
    }
}


.eds-u-text-monospace {
    font-family: var(--eds-f-family-monospace) !important;
}

// Alignments
.eds-u-text-left {
    text-align: left !important;
}
.eds-u-text-right {
    text-align: right !important;
}
.eds-u-text-center {
    text-align: center !important;
}
.eds-u-text-justify {
    text-align: justify !important;
}
.eds-u-text-wrap {
    white-space: normal !important;
}
.eds-u-text-no-wrap {
    white-space: nowrap !important;
}
.eds-u-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

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

// Anchors / links
.eds-u-text-link,
.eds-u-text-link-standalone {
    color: var(--eds-c-foreground-primary) !important;
    cursor: pointer !important;
    text-decoration: none !important;

    &:hover {
        text-decoration: underline !important;
    }
}
.eds-u-text-link-underline {
    color: var(--eds-c-foreground-primary) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}
.eds-u-text-link-neutral-underline {
    color: var(--eds-c-foreground-default) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

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

// Layout formatting
.eds-u-text-code,
.eds-u-text-kbd,
.eds-u-text-pre,
.eds-u-text-samp {
    font-family: var(--eds-f-family-monospace) !important;
}

.eds-u-text-code {
    color: var(--eds-c-foreground-critical);
    word-wrap: break-word !important;
}

.eds-u-text-kbd {
    background-color: var(--eds-c-surface-neutral-subtle) !important;
    border-radius: var(--eds-br-s) !important;
    color: var(--eds-c-on-surface-neutral-subtle) !important;
    font-size: var(--eds-f-s-s) !important;
    padding: 1px var(--eds-sp-3xs) !important;
}

.eds-u-text-pre {
    color: var(--eds-c-foreground-critical) !important;
    display: block !important;
    font-size: 90% !important;
}

.eds-u-text-blockquote {
    border-left: var(--eds-sp-3xs) solid var(--eds-c-border-neutral) !important;
    padding: var(--eds-sp-xs) var(--eds-sp-m) !important;
}

.eds-u-text-mark {
    background-color: var(--eds-c-surface-brand-subtler) !important;
    padding: var(--eds-sp-3xs) !important;
}

.eds-u-text-highlight {
    padding: var(--eds-sp-3xs) !important;
    background-color: var(--eds-c-surface-brand-subtler) !important;
}

.eds-u-text-search {
    background-color: var(--eds-c-surface-info-subtler) !important;
    border: var(--eds-bw-xs) solid var(--eds-c-border-info) !important;
    color: var(--eds-c-on-surface-info-subtler) !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

.eds-u-text-paragraph {
    font: var(--eds-f-paragraph-m) !important;

    margin-block-start: var(--eds-sp-xs) !important;
    margin-block-end: var(--eds-sp-xs) !important;

    &:first-child {
        margin-block-start: 0px !important;
    }
    &:last-child {
        margin-block-end: 0px !important;
    }
}
.eds-u-text-list {
    padding-inline-start: var(--eds-sp-3xl) !important;
}
.eds-u-text-list-item {
    margin-block-start: var(--eds-sp-3xs) !important;
    margin-block-end: var(--eds-sp-3xs) !important;
}