// Define all the fonts and text related stuff

@import "../utils/selectors";

// Default

body {
    --font-size: var(--md);

    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    line-height: var(--line-height);

    // Font Smoothing

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

// Headings

:where(h1) {
    --text-color: var(--accent);
   
    color: var(--text-color);
}

h1, h2, h3,
h4, h5, h6 {
    --spacing: var(--lg);
    margin-bottom: var(--spacing);
}

h2 { --spacing: var(--md) }

h3, h4 { --spacing: var(--sm)}

h5 { --spacing: var(--sm) }

h6 { --spacing: var(--xs) }

// Paragraphs

p {
    --text-color: var(--content-text);
    --font-weight: 500;

    color: var(--text-color);
    font-weight: var(--font-weight);

    &:not(:last-child) {
        margin-bottom: var(--lg);
    }
}

//  Text Tags Variants

code, pre {
    --font-family: var(--font-mono, monospace);
    --bg: var(--foreground-secondary);
    --spacing: var(--xs);

    padding: var(--spacing);
    
    font-family: var(--font-family);
    background-color: var(--bg);
    color: var(--text-color);
}

small {
    --font-weight: 500;
    --text-color: var(--muted-text);

    font-weight: var(--font-weight);
    color: var(--text-color);
}

del {
    text-decoration: line-through;
}

// text variants

#{$text-elements} {

    &.muted {
        color: var(--muted-text);
    }

    &.foreground {
        color: var(--foreground-text);
    }
}

// utilities

#{$text-elements} {

    &.limited-text {

        --_line-number: 3;
        --_text-overflow: ellipsis;
        
        text-overflow: var(--_text-overflow);
        line-clamp: var(--_line-number);
        -webkit-line-clamp: var(--_line-number);
        //white-space: nowrap;
        overflow: hidden;
    }
}

// Customizing Spacing for Wrappers
a > #{$text-elements} {

    --spacing: 0;
    padding: 0;
    margin: 0;
}