@use 'functions' as *;

@mixin size-font($ds, $ms) {
    font-size: mobile-vw($ms);

    &.vh {
        font-size: mobile-vh($ms);
    }

    @include desktop {
        font-size: desktop-vw($ds);

        &.vh {
            font-size: desktop-vh($ds);
        }
    }
}

@mixin h1 {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(32px, 32px);
}
@mixin h6 {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(12px, 14px);
}

@mixin p {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(16px, 16px);
}
@mixin p-small {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(8px, 14px);
}

@mixin label {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(7px, 12px);
}

@mixin code {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1.3;
    @include size-font(12px, 14px);
}
