//
// Background styling mixin
// --------------------------------------------------

// Base mixin for defining text and border colors for common elements and classes
.background-variant(@bg: @body-bg, @text: @text-color, @headings: @headings-color, @muted: @text-muted, @link: @link-color, @link-hover: @link-hover-color, @hr: @hr-border) {
  // Base text color
  .opacify(color, @text, @bg); // Non-rgba fallback
  color: @text;

  // Anchor links
  .link-variant(@bg, @link, @link-hover);

  // Headings
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    & when (@headings = inherit), (@headings = 'inherit')  {
      color: inherit;
    }
    & when (iscolor(@headings)) {
      .opacify(color, @headings, @bg); // Non-rgba fallback
      color: @headings;
    }
  }

  // Muted text
  .text-muted {
    .opacify(color, @muted, @bg); // Non-rgba fallback
    color: @muted;
  }

  // Faded text
  .text-faded {
    @faded: fade(@muted, alpha(@text-faded) * 100%);
    .opacify(color, @faded, @bg); // Non-rgba fallback
    color: @faded;
  }

  // Horizontal rules and page-header borders
  .hr:before,
  .hr:after,
  .page-header,
  hr {
    .opacify(border-color, @hr, @bg); // Non-rgba fallback
    border-color: @hr;
  }

  // Custom horizontal rules with pseudo content
  hr {
    .opacify(color, @hr, @bg); // Non-rgba fallback
    color: @hr;
  }

  // Resets (because we can't override everything in BS)
  .list-group {
    color: @text-color;
  }
}

// Handy bg-variant mixin for inverse styling (based on brand '@*-inverse' defaults)
.background-variant-inverse(@bg: @brand-primary, @text: @text-color-inverse, @headings: @headings-color-inverse, @muted: @text-muted-inverse, @link: @link-color-inverse, @link-hover: @link-hover-color-inverse, @hr: @hr-border-inverse) {
  .background-variant(@bg, @text, @headings, @muted, @link, @link-hover, @hr);
}

// Create different colored links (excluding .btn, .list-group-item, .panel-title, and .alert-link)
// NOTE: should be used inside a selector - e.g. .something > a { .link-color-variant(…) }
.link-color-variant(@bg: @bg-default, @link: @link-color, @link-hover: @link-hover-color) {
  .opacify(color, @link, @bg); // Non-rgba fallback
  color: @link;

  &:hover,
  &:focus {
    .opacify(color, @link-hover, @bg); // Non-rgba fallback
    color: @link-hover;
    .opacify(outline-color, @link-hover, @bg); // Non-rgba fallback;
    outline-color: @link;
  }
}

// As above but without specifying a selector (<a>)
.link-variant(@bg: @bg-default, @link: @link-color, @link-hover: @link-hover-color) {
  // Exceptions - we don't want to override ALL link colors.
  a:not(.btn),
  a.btn-link {
    .link-color-variant(@bg, @link, @link-hover);
  }
}

// Turn a semi-transparent color opaque by mixing with a background (e.g. its parent's background-color)
.opacify (@prop, @color, @bg: @body-bg) {
  & when (alpha(@color) < 1) {
    @{prop}: mix(fadein(@color, 100%), fadein(@bg, 100%), (100% * alpha(@color)));
  }
  & when (alpha(@color) = 1) {
    @{prop}: @color;
  }
}