@import "../settings.colors";
@import "../settings.fonts";

@import "settings.fonts";
@import "tools.mixins";

@mixin font15r {
  @include font-pratt;
  font-size: rem(15);
  line-height: line-height(15, 18);
  .o-card--adv & {
    font-family: $font-sans-stack;
    font-weight: normal;
  }
}

@mixin font17r {
  @include font-pratt;
  font-size: rem(17);
  line-height: line-height(17, 20);
  .o-card--adv & {
    font-family: $font-sans-stack;
    font-size: rem(15);
    font-weight: normal;
  }
}

@mixin font17b {
  @include font-pratt-bold;
  font-size: rem(17);
  line-height: line-height(17, 20);
  .o-card--adv & {
    font-family: $font-sans-stack;
    font-weight: bold;
    font-size: rem(15);
    line-height: rem(18);
  }
}

@mixin font19b {
  @include font-pratt-bold;
  font-size: rem(19);
  line-height: line-height(19, 22);
  .o-card--adv & {
    font-family: $font-sans-stack;
    font-weight: bold;
  }
}

@mixin font19r {
  @include font-pratt;
  font-size: rem(19);
  line-height: line-height(19, 22);
  .o-card--adv & {
    font-family: $font-sans-stack;
    font-weight: bold;
  }
}

@mixin font22b {
  @include font-pratt-bold;
  font-size: rem(22);
  line-height: line-height(22, 25);
}

@mixin font24b {
  @include font-pratt-bold;
  font-size: rem(24);
  line-height: line-height(24, 27);
}

@mixin font24r {
  @include font-pratt;
  font-size: rem(24);
  line-height: line-height(24, 27);
}

@mixin font28b {
  @include font-pratt-bold;
  font-size: rem(28);
  line-height: line-height(28, 31);
}

@mixin font32b {
  @include font-pratt-bold;
  font-size: rem(32);
  line-height: line-height(32, 35);
}

@mixin font38b {
  @include font-pratt-bold;
  font-size: rem(38);
  line-height: line-height(38, 41);
}


// Card Column Order
@mixin col-order ($first, $second) {
  .o-card__col {
    order: $second;
    &:first-of-type {
      order: $first;
    }
  }
}

// Flex display
@mixin flex-display ($display: flex, $wrap: wrap, $flow: "") {
  @if ($display != "") {
    display: $display;
  }
  @if ($wrap != "") {
    flex-wrap: $wrap;
  }
  @if ($flow != "") {
    flex-flow: $flow;
  }
}

@mixin o-card-hed-single-md {
  @include font19b;
  color: $color-white;
  .o-card__hed__duration {
    color: $color-white;
  }
  .c-indicator-icon__art {
    fill: $color-white;
  }
  .c-indicator-icon__art--canpro--inverted {
    fill: $color-canpro-100;
  }
}
