@use 'sass:map';
@use '../01-base' as base;
@use '../02-tokens/dimensions-semantic' as dimensions-semantic;
@use '../02-tokens/maps' as maps;
@use '../02-tokens/typography-primitive' as typography-primitive;
@use '../02-tokens/typography-semantic' as typography-semantic;

@font-face {
  font-family: 'Inter';
  src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Inter';
  src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
  font-style: italic;
}

:root {
    // base font size
    --eds-f-s-base: 16px;
    
    // font families
    --eds-f-family: 'Inter', arial, sans-serif;
    --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;    

    @each $size, $def in typography-primitive.$font-size-map {
        --eds-f-s-#{$size}: #{$def};
    }
    @each $size, $def in typography-primitive.$font-line-height-map {
        --eds-f-lh-#{$size}: #{$def};
    }
    @each $size, $def in typography-primitive.$font-weight-map {
        --eds-f-w-#{$size}: #{$def};
    }

    // EDS raw vars
    @each $size, $def in typography-primitive.$font-size-letter-spacing-map {
        --eds-f-ls-#{$size}: #{$def};
    }    

    // EDS typography
    @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
        @each $size, $sizeDef in $typeDef {
            --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
        }
    }

    @include base.media(maps.$eds-bkp-tablet) {
        @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {
            $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);
            @each $size, $sizeDef in $typeDef {
                $desktopSizeDef: map.get($desktopTypeDef, $size);
                // Only emit override if size or line-height differs from desktop
                @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {
                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
                }
            }
        }        
    }

    @include base.media(maps.$eds-bkp-mobile) {
        @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {
            $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);
            @each $size, $sizeDef in $typeDef {
                $tabletSizeDef: map.get($tabletTypeDef, $size);
                // Only emit override if size or line-height differs from tablet
                @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {
                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
                }
            }
        }        
    }    
}