@use 'sass:list';
@use './2_typography' as typography;

@mixin center-v() {
    align-items: center;
    display: flex;
}

@mixin center-vh() {
    @include center-v;

    justify-content: center;
}

@mixin text-body {
    font-size: typography.$font-size-base;
    font-weight: typography.$font-weight-normal;
    line-height: typography.scale-font-size(20);
    letter-spacing: normal;
}

@mixin text-body-bold {
    font-size: typography.$font-size-base;
    line-height: typography.scale-font-size(20);
    font-weight: typography.$font-weight-bold;
}
@mixin text-bold {
    @include text-body-bold;
}

@mixin text-body-small {
    font-size: typography.$font-size-sm;
    font-weight: typography.$font-weight-normal;
    line-height: typography.scale-font-size(18);
}
@mixin text-small {
    @include text-body-small;
}

@mixin text-body-small-bold {
    font-size: typography.$font-size-sm;
    font-weight: typography.$font-weight-bold;
    line-height: typography.scale-font-size(18);
}
@mixin text-small-bold {
    @include text-body-small-bold;
}

@mixin text-label {
    font-size: typography.$font-size-sm;
    font-weight: typography.$font-weight-bold;
    line-height: typography.scale-font-size(18);
    letter-spacing: 1px;
}

@mixin text-button-label {
    @include text-label;

    text-transform: uppercase;
}

@mixin text-heading($index) {
    font-size: list.nth(typography.$heading-font-sizes, $index);
    font-weight: list.nth(typography.$heading-font-weights, $index);
    line-height: list.nth(typography.$heading-line-heights, $index);
}

@mixin text-table-header {
    font-size: typography.$font-size-sm;
    font-weight: typography.$font-weight-bold;
    line-height: typography.scale-font-size(18);
}

// Legacy mixins
@mixin fonttype-label {
    @include text-label;

    color: var(--gray-600);
}