@import "./variables";

// -------------------------------------
//   Relative size calculator
// -------------------------------------

@function relative($target-size, $base-size: $component-base-font-size, $unit: 1em) {
    @return ($target-size / $base-size * $unit);
}

@function rem($target-size) {
    @return relative($target-size, $root-font-size, 1rem);
}

// -------------------------------------
//   Text overflow Ellipsis
// -------------------------------------

@mixin overflow-ellipsis($_width: null) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    @if $_width {
        width: $_width;
    }
}

// -------------------------------------
//   Remove button default appearance
// -------------------------------------

@mixin remove-button-appearance {
    color: inherit;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    text-align: inherit;
    appearance: none;
    user-select: none;
}

@import "./variables";

// -------------------------------------
//   Relative size calculator
// -------------------------------------

@function relative($target-size, $base-size: $component-base-font-size, $unit: 1em) {
    @return ($target-size / $base-size * $unit);
}

@function rem($target-size) {
    @return relative($target-size, $root-font-size, 1rem);
}

// -------------------------------------
//   Text overflow Ellipsis
// -------------------------------------

@mixin overflow-ellipsis($_width: null) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    @if $_width {
        width: $_width;
    }
}

// -------------------------------------
//   Remove button default appearance
// -------------------------------------

@mixin remove-button-appearance {
    color: inherit;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    text-align: inherit;
    appearance: none;
    user-select: none;
}

// -------------------------------------
//   Default typography
// -------------------------------------
@mixin small-text {
    font-size: rem($font-size-small);
    line-height: rem($line-height-small);
}

@mixin base-text {
    font-size: rem($font-size-base);
    line-height: rem($line-height-base);
}

@mixin large-text {
    font-size: rem($font-size-large);
    line-height: rem($line-height-large);
}

Add SCSS mixins for 3 defined font types
Add SCSS mixins for 3 defined font types
