$display-text: em(48px);
$headline: em(32px);
$title: em(24px);
$subheader: em(20px);
$body: em(16px);
$caption: em(12px);
$small: em(9px);

@mixin display() {
    @include font("IntervalNextReg");
    font-size: $display-text;
    color: color('text','title');
}

@mixin headline($isBig:false) {
    @include font("IntervalNextReg");
    @if $isBig {
        font-size: em(38px);
    } @else {
        font-size: $headline;
    }
    color: color('text','title');

    &--light {
        @include font("IntervalNextLi");
    }
}

@mixin title() {
    @include font("IntervalNextReg");
    font-size: $title;
    color: color('text','title');
}

@mixin subheader() {
    @include font("IntervalNextReg");
    font-size: $subheader;
    color: color('text','subheader');
}

@mixin subtitle() {
    @include font("IntervalNextBook");
    font-size: em(18px);
    color: color('text', 'subheader');
}

@mixin body() {
    @include font("IntervalNextBook");
    font-size: $body;
    color: color('text', 'body');
    line-height: 21px;
}

@mixin caption() {
    @include font("IntervalNextBook");
    font-size: $caption;
}

@mixin small() {
    @include font("IntervalNextBook");
    font-size: $small;
}

@mixin anchor() {
    @include font("IntervalNextReg");
    color: color('primary');
    text-decoration: none;

    &:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    &--active {
        color: color('primary', 'light');
    }
    &--negative {
        color: color('anchor', 'negative')
    }
    &--alternative {
        color: color('anchor', 'alternative');
    }
}

@mixin anchor-show-more($border-color: color('primary'), $bg-color: color('primary', 'highlight')) {
    @include anchor();
    padding-right: 1em;
    position: relative;
    display: inline-block;

    &:before {
        content: '';
        position: absolute;
        top: 0.5em;
        right: -1em;
        border-top: 0.438em solid $border-color;
        border-left: 0.438em solid transparent;
        border-right: 0.438em solid transparent;
    }

    &:after {
        content: '';
        position: absolute;
        right: -0.938em;
        top: 0.5em;
        border-top: 0.375em solid $bg-color;
        border-left: 0.375em solid transparent;
        border-right: 0.375em solid transparent;
    }

    &--visible {
        &:before {
            top: 0.5em;
            right: -0.938em;
            border-bottom: 0.438em solid $border-color;
            border-left: 0.438em solid transparent;
            border-right: 0.438em solid transparent;
            border-top: none;
        }
        &:after {
            right: -0.875em;
            top: 0.563em;
            border-bottom: 0.375em solid $bg-color;
            border-left: 0.375em solid transparent;
            border-right: 0.375em solid transparent;
            border-top: none;
        }
    }
}

@mixin label() {
    font-size: em(16px);
    @include font("IntervalNextReg");
    color: color("input", "label");
}

@mixin input-placeholder() {
    &::-webkit-input-placeholder {@content}
    &:-ms-input-placeholder {@content}
    &::-ms-input-placeholder {@content}
}