@use "sass:map";
@use "sass:list";

$text-variants: "headline" !default;

$font-sizes: (
    "headline": 52px,
) !default;

$font-weights: (
    "headline": 700,
) !default;

// line height is calculated by dividing the line height rem by the font size rem
$line-height: (
    "headline": 1.11,
) !default;

$letter-spacings: (
    "headline": -1.04px,
) !default;

$font-families: (
    "headline": var(--font-family-name),
) !default;

$default-font-family: var(--font-family-name) !default;

@mixin text($variant) {
    @if list.index($text-variants, $variant) == null {
        @error "Invalid text variant #{$variant}";
    }

    font-weight: map.get($font-weights, $variant);
    font-size: map.get($font-sizes, $variant);
    line-height: map.get($line-height, $variant);
    letter-spacing: map.get($letter-spacings, $variant);

    @if map.get($font-families, $variant) != $default-font-family {
        font-family: map.get($font-families, $variant);
    }
}

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

@mixin vertical-line-clamp($lines, $line-height) {
    @if type-of($lines) != "number" {
        @error "The lines parameter must be of type 'number'.";
    }

    @if type-of($line-height) != "number" {
        @error "The line-height parameter must be of type 'number'.";
    }

    height: #{$lines * $line-height}em;
    overflow: hidden;
    line-height: $line-height;

    @supports (display: -webkit-box) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $lines;
        line-clamp: $lines;
        // Unset properties, which are used to introduce more hacky way of implementing the same feature for IE
        height: inherit;
        line-height: inherit;
    }
}