/**
 * Style v4 Typography
 * -----------------------------------------------------------------------------
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

// font-family
$inter: 'Inter', sans-serif;

%font-v4-bold {
    font-family: $inter;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
}
%font-v4-semibold {
    font-family: $inter;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}
%font-v4-medium {
    font-family: $inter;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}
%font-v4-regular {
    font-family: $inter;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

// region heading
%font-v4-title {
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -0.055rem;
    @extend %font-v4-semibold;
}
%font-v4-heading-1 {
    font-size: 1.5rem;
    line-height: 1.75rem;
    letter-spacing: -0.0285rem;
    @extend %font-v4-semibold;
}
%font-v4-heading-2 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -0.01575rem;
    @extend %font-v4-semibold;
}
%font-v4-heading-3 {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.011rem;
    @extend %font-v4-semibold;
}
%font-v4-heading-4 {
    font-size: 0.875rem;
    line-height: 1rem;
    letter-spacing: unset;
    @extend %font-v4-semibold;
}
%font-v4-heading-5 {
    font-size: 0.8125rem;
    line-height: 16px;
    letter-spacing: unset;
    @extend %font-v4-semibold;
}
%font-v4-heading-6 {
    font-size: 0.75rem;
    line-height: 0.75rem;
    letter-spacing: 0;
    @extend %font-v4-semibold;
}
// endregion

// region body
%font-v4-body-1 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: -0.00525rem;
    @extend %font-v4-regular;
}
%font-v4-body-2 {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    letter-spacing: -0.00244rem;
    @extend %font-v4-regular;
}
// endregion

// region subtitle
%font-v4-subtitle-1 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: -0.00525rem;
    @extend %font-v4-medium;
}
%font-v4-subtitle-2 {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    letter-spacing: -0.00244rem;
    @extend %font-v4-medium;
}
// endregion

// region chart
%font-v4-chart-1 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.015rem;
    @extend %font-v4-bold;
}
%font-v4-chart-2 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    letter-spacing: -0.0125rem;
    @extend %font-v4-bold;
}
// endregion


// region other
%font-v4-button {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.00875rem;
    @extend %font-v4-semibold;
}
%font-v4-overline {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.045rem;
    text-transform: uppercase;
    @extend %font-v4-medium;
}
%font-v4-caption {
    font-size: 0.75rem;
    line-height: 1rem;
    @extend %font-v4-regular;
}
%font-v4-table-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    letter-spacing: 0.00813rem;
    @extend %font-v4-semibold;
}
%font-v4-input-label {
    font-size: 0.8125rem;
    line-height: 1rem;
    letter-spacing: 0.00813rem;
    @extend %font-v4-medium;
}
%font-v4-tab-label-1 {
    font-size: 0.875rem;
    line-height: 1rem;
    @extend %font-v4-medium;
}
%font-v4-tab-label-2 {
    font-size: 0.875rem;
    line-height: 1rem;
    @extend %font-v4-bold;
}
%font-v4-chip-label {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: normal;
    @extend %font-v4-semibold;
}
// endregion
// endregion


// region css classes
.font-v4-bold {@extend %font-v4-bold;}
.font-v4-semibold {@extend %font-v4-semibold; }
.font-v4-medium {@extend %font-v4-medium;}
.font-v4-regular {@extend %font-v4-regular;}

.font-v4-title {@extend %font-v4-title;}
.font-v4-heading-1 {@extend %font-v4-heading-1;}
.font-v4-heading-2 {@extend %font-v4-heading-2;}
.font-v4-heading-3 {@extend %font-v4-heading-3;}
.font-v4-heading-4 {@extend %font-v4-heading-4;}
.font-v4-heading-5 {@extend %font-v4-heading-5;}
.font-v4-heading-6 {@extend %font-v4-heading-6;}
.font-v4-body-1 {@extend %font-v4-body-1;}
.font-v4-body-2 {@extend %font-v4-body-2;}
.font-v4-subtitle-1 {@extend %font-v4-subtitle-1;}
.font-v4-subtitle-2 {@extend %font-v4-subtitle-2;}
.font-v4-button {@extend %font-v4-button;}
.font-v4-overline {@extend %font-v4-overline;}
.font-v4-caption {@extend %font-v4-caption;}
.font-v4-table-label {@extend %font-v4-table-label;}
.font-v4-input-label {@extend %font-v4-input-label;}
.font-v4-tab-label-1 {@extend %font-v4-tab-label-1;}
.font-v4-tab-label-2 {@extend %font-v4-tab-label-2;}
.font-v4-chip-label {@extend %font-v4-chip-label;}
.font-v4-chart-1 {@extend %font-v4-chart-1;}
.font-v4-chart-2 {@extend %font-v4-chart-2;}
// endregion