@import '../constants/colors';
@import '../constants/typography';

@mixin font-family {
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@mixin font-aliasing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

@mixin fonts {
    @include font-family;
    @include font-aliasing;

    font-weight: normal;
    font-size: $bdl-fontSize;
}

@mixin bdl-fonts-dejaBlue {
    @include font-family;
    @include font-aliasing;

    font-weight: normal;
    font-size: $bdl-fontSize--dejaBlue;
}

@mixin common-typography {
    @include fonts;

    color: $bdl-gray;
    line-height: $bdl-line-height;
    letter-spacing: 0.3px;
}

@mixin bdl-commonTypography-dejaBlue {
    @include bdl-fonts-dejaBlue;

    color: $bdl-gray;
    line-height: $bdl-line-height;
    letter-spacing: 0.3px;
}

@mixin bdl-targetIE11 {
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        @content;
    }
}

@mixin bdl-lineClamp($max-lines: 2, $line-height: 1.5) {
    display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
    overflow: hidden;
    line-height: $line-height;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
    -webkit-line-clamp: $max-lines;

    // On IE11 we truncate to a single line since line-clamp
    // is not supported
    @include bdl-targetIE11 {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
