@each $weights in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
    @font-face {
        font-family: 'Inter';
        src: url('chrome-extension://__MSG_@@extension_id__/fonts/inter-#{$weights}.woff2') format('woff2');
        font-display: auto;
        font-style: normal;
        font-weight: #{$weights};
    }
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
}

$light_weight: 300;
$regular_weight: 400;
$normal_weight: 500;
$semi_bold_weight: 600;
$bold_weight: 700;
$black_weight: 900;

$x_small_size: 8px;
$small_size: 12px;
$medium_size: 16px;
$large_size: 24px;
$x_large_size: 32px;
$xx_large_size: 48px;

$x_small_line_height: 12px;
$small_line_height: 16px;
$medium_line_height: 20px;
$large_line_height: 28px;
$x_large_line_height: 36px;
$xx_large_line_height: 52px;

:export {
    light_weight: $light_weight;
    regular_weight: $regular_weight;
    normal_weight: $normal_weight;
    semi_bold_weight: $semi_bold_weight;
    bold_weight: $bold_weight;
    black_weight: $black_weight;

    x_small_size: $x_small_size;
    small_size: $small_size;
    medium_size: $medium_size;
    large_size: $large_size;
    x_large_size: $x_large_size;
    xx_large_size: $xx_large_size;

    x_small_line_height: $x_small_line_height;
    small_line_height: $small_line_height;
    medium_line_height: $medium_line_height;
    large_line_height: $large_line_height;
    x_large_line_height: $x_large_line_height;
    xx_large_line_height: $xx_large_line_height;
}