@import '../../../../bootstrap/less/type';

//
// Typography
// --------------------------------------------------


// Responsive headings
// -------------------------

// Mixin only outputs the responsive sizes if they are actually defined
.responsive-header-classes(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .h1-@{infix} { .h1; }
    .h2-@{infix} { .h2; }
    .h3-@{infix} { .h3; }
    .h4-@{infix} { .h4; }
    .h5-@{infix} { .h5; }
    .h6-@{infix} { .h6; }
  }
}

.make-responsive-heading(@index) {
  h@{index}, .h@{index} {
    & when not (~"@{line-height-h@{index}}" = ~"@{headings-line-height}") {
      line-height: ~"@{line-height-h@{index}}";
    }
    & when not (~"@{font-size-h@{index}-sm}" = ~"@{font-size-h@{index}}") {
      @media(min-width: @screen-sm-min) {
        font-size: ~"@{font-size-h@{index}-sm}";
      }
    }
    & when not (~"@{font-size-h@{index}-md}" = ~"@{font-size-h@{index}}") {
      @media(min-width: @screen-md-min) {
        font-size: ~"@{font-size-h@{index}-md}";
      }
    }
    & when not (~"@{font-size-h@{index}-lg}" = ~"@{font-size-h@{index}}") {
      @media(min-width: @screen-lg-min) {
        font-size: ~"@{font-size-h@{index}-lg}";
      }
    }
  }
}

// Generate responsive headings (h1 to h6)
.make-responsive-heading(1);
.make-responsive-heading(2);
.make-responsive-heading(3);
.make-responsive-heading(4);
.make-responsive-heading(5);
.make-responsive-heading(6);

.responsive-header-classes(sm);
.responsive-header-classes(md);
.responsive-header-classes(lg);


// Display headings - inspired by BS v4
// ------------------------------------

.responsive-display-heading-classes(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .display-@{infix}-1 { .display-1; }
    .display-@{infix}-2 { .display-2; }
    .display-@{infix}-3 { .display-3; }
    .display-@{infix}-4 { .display-4; }
  }
}

.make-responsive-display-heading(@index) {
  .display-@{index} {
    font-size: ~"@{display@{index}-size}";
    font-weight: ~"@{display@{index}-weight}";
    line-height: ~"@{display@{index}-line-height}";

    & when not (~"@{display@{index}-size-sm}" = ~"@{display@{index}-size}") {
      @media(min-width: @screen-sm-min) {
        font-size: ~"@{display@{index}-size-sm}";
      }
    }
    & when not (~"@{display@{index}-size-md}" = ~"@{display@{index}-size}") {
      @media(min-width: @screen-md-min) {
        font-size: ~"@{display@{index}-size-md}";
      }
    }
    & when not (~"@{display@{index}-size-lg}" = ~"@{display@{index}-size}") {
      @media(min-width: @screen-lg-min) {
        font-size: ~"@{display@{index}-size-lg}";
      }
    }
  }
}

// Generate display headings (display-1 to display-4)
.make-responsive-display-heading(1);
.make-responsive-display-heading(2);
.make-responsive-display-heading(3);
.make-responsive-display-heading(4);

.responsive-display-heading-classes(sm);
.responsive-display-heading-classes(md);
.responsive-display-heading-classes(lg);

.display-1,
.display-2,
.display-3,
.display-4 {
  small,
  .small {
    font-size: @display-small-size;
    font-weight: inherit;
  }
}


// Body text
// -------------------------


// Emphasis & misc
// -------------------------

// Extra small text
.tiny {
  font-size: @font-size-tiny;
  line-height: @line-height-tiny;
}

// Larger text
.large {
  font-size: @font-size-large;
  line-height: @line-height-large;

  p& {
    margin-bottom: floor(@font-size-large * .75);
  }
}

.make-responsive-type(@size) {
  font-size: ~"@{font-size-@{size}}";
  line-height: ~"@{line-height-@{size}}";
}
.make-responsive-type-classes(@screen) {
  .tiny-@{screen} { .make-responsive-type(tiny); }
  .small-@{screen} { .make-responsive-type(small); }
  .large-@{screen} { .make-responsive-type(large); }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .make-responsive-type-classes(sm);
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .make-responsive-type-classes(md);
}
@media (min-width: @screen-lg-min) {
  .make-responsive-type-classes(lg);
}


// Contextual text colors
// -------------------------

.responsive-contextual-text(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .text-@{infix}-muted { .text-muted; }
    .text-@{infix}-default { .text-default; }
    .text-@{infix}-inverse { .text-inverse; }
    .text-@{infix}-faded { .text-faded; }
    .text-@{infix}-primary { .text-primary; }
    .text-@{infix}-secondary { .text-secondary; }
    .text-@{infix}-reset { .text-reset; }
    .text-@{infix}-normal { .text-normal; }
    .text-@{infix}-danger { .text-danger; }
    .text-@{infix}-info { .text-info; }
    .text-@{infix}-warning { .text-warning; }
    .text-@{infix}-success { .text-success; }
  }
}

.text-muted {
  .text-emphasis-variant(@text-muted);
}

.text-gray {
  .text-emphasis-variant(@color-gray);
}

.text-gray-light {
  .text-emphasis-variant(lighten(@color-gray, 45%));
}

.text-black {
  .text-emphasis-variant(@color-black);
}

// Reset any text to default <body> color
.text-default {
  .text-emphasis-variant(@text-color);
}

// Invert text to base inverse color
.text-inverse {
  .text-emphasis-variant(@text-color-inverse);
}

// Even more faded text than .text-muted - ideal for icons, perhaps not accessible for copy
.text-faded {
  .text-emphasis-variant(@text-faded);
}

.text-secondary {
  .text-emphasis-variant(@brand-secondary);
}

.text-white {
  color: @color-white
}

// Reset
.text-reset { color: inherit !important; }

// Control whether or not (and how) the text in an element is allowed to be selected
.user-select(@user-select) {
  -webkit-touch-callout: @user-select;
  -webkit-user-select: @user-select;
  -khtml-user-select: @user-select;
  -moz-user-select: @user-select;
  -ms-user-select: @user-select;
  user-select: @user-select;
}

// Whitespace - this is an alternative to the .text-nowrap class that comes out of the BS3 box
.text-normal { white-space: normal; }

.responsive-contextual-text(sm);
.responsive-contextual-text(md);
.responsive-contextual-text(lg);

.pence-color {
  small {
    color: inherit;
  }
}

.item-price {
  .pence-color
}

.basket-total-price {
  .pence-color
}

.title-text-height {
  min-height: 40px;
}