// -----------------------------------------------------------------------------
// Background Colors
// -----------------------------------------------------------------------------
.bg-black {
    background-color: $gray-base;
    color: white;
}

.bg-gray-darker {
    background-color: $gray-darker;
    color: white;
}

.bg-gray-dark {
    background-color: $gray-dark;
    color: white;
}

.bg-gray {
    background-color: $gray;
}

.bg-gray-light {
    background-color: $gray-light;
}

.bg-gray-lighter {
    background-color: $gray-lighter;
}

.bg-white {
    background-color: white;
    color: black;
}

.bg-info {
    background-color: $brand-info !important;
}
.bg-success {
    background-color: $brand-success !important;
    color: white;
}

.bg-half-n-half {
  background: linear-gradient(to bottom, $gray-lighter 0%, $gray-lighter 50%, white 50%, white 100%);
}
.bg-half-n-half-horizontal {
  // background: linear-gradient(to right, white 50%, $gray-lighter 50%);
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 75%;
    background-color: white;
    z-index: -1;
  }
  @media(min-width:$screen-sm) {
    &:after {
      width: calc(50% - 16px);
    }
  }
}

.bg-offset-base {
  position: relative;
  z-index: 0;
  overflow: hidden;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: white;
    z-index: -1;
  }
}
$columnUnit: 8.33%;
$rowUnit: 10%;
.bg-offset-leftbottom-5-2 {
  &:after {
    left: -$grid-gutter-width/2;
    right: $columnUnit * 5.5;
    top: $rowUnit * 2;
  }
}

.bg-texture {
  color: white;
  background-color: $gray-base;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-transform-style: preserve-3d; // prevents text flicker in safari
}

.bg-texture-inverted {
  @extend .bg-texture;
  background-color: white;
  color: $gray-base;

  a {
    color: $gray-base;
  }

  a.btn-success {
    color: white;
  }
}

// hide bg texture on sm width
.bg-texture-no-sm {
  @media (max-width: $screen-sm-min)  {
    background-image: none !important;
  }
}
.bg-texture-no-md {
  @media (max-width: $screen-md-min)  {
    background-image: none !important;
  }
}
.bg-texture-no-lg {
  @media (max-width: $screen-lg-min)  {
    background-image: none !important;
  }
}

.bg-offset-left {
  position: relative;
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 83.33%;
    background-color: $gray-lighter;
  }
  @media(min-width:$screen-sm) {
    &:before {
      left: $grid-gutter-width/2;
    }
  }
}
.bg-offset-right {
  position: relative;
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 83.33%;
    background-color: $gray-lighter;
  }
  @media(min-width:$screen-sm) {
    &:before {
      right: $grid-gutter-width/2;
    }
  }
}

// -----------------------------------------------------------------------------
// Striped
// -----------------------------------------------------------------------------
.bg-striped {
  background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQoU43M2QkAIAwEUdPG9l/btqFEUDxyzfdjpBUi2SVzigBICBfSmQtP5MIXmdBCH/TQBSO0YYYmrCCFA5ZUJ7zWQizKAAAAAElFTkSuQmCC') repeat center center;
  background-size: 8px;
}



// -----------------------------------------------------------------------------
// Offset, fractional backgrounds
// only gray lighter support for now
// add more as needed
// -----------------------------------------------------------------------------
.bg-gray-lighter-right-1  { @include bg-fraction($gray-lighter, right, 1); }
.bg-gray-lighter-right-2  { @include bg-fraction($gray-lighter, right, 2); }
.bg-gray-lighter-right-3  { @include bg-fraction($gray-lighter, right, 3); }
.bg-gray-lighter-right-4  { @include bg-fraction($gray-lighter, right, 4); }
.bg-gray-lighter-right-5  { @include bg-fraction($gray-lighter, right, 5); }
.bg-gray-lighter-right-6  { @include bg-fraction($gray-lighter, right, 6); }
.bg-gray-lighter-right-7  { @include bg-fraction($gray-lighter, right, 7); }
.bg-gray-lighter-right-8  { @include bg-fraction($gray-lighter, right, 8); }
.bg-gray-lighter-right-9  { @include bg-fraction($gray-lighter, right, 9); }
.bg-gray-lighter-right-10 { @include bg-fraction($gray-lighter, right, 10); }
.bg-gray-lighter-right-11 { @include bg-fraction($gray-lighter, right, 11); }
.bg-gray-lighter-right-12 { @include bg-fraction($gray-lighter, right, 12); }

.bg-gray-lighter-left-1  { @include bg-fraction($gray-lighter, left, 1); }
.bg-gray-lighter-left-2  { @include bg-fraction($gray-lighter, left, 2); }
.bg-gray-lighter-left-3  { @include bg-fraction($gray-lighter, left, 3); }
.bg-gray-lighter-left-4  { @include bg-fraction($gray-lighter, left, 4); }
.bg-gray-lighter-left-5  { @include bg-fraction($gray-lighter, left, 5); }
.bg-gray-lighter-left-6  { @include bg-fraction($gray-lighter, left, 6); }
.bg-gray-lighter-left-7  { @include bg-fraction($gray-lighter, left, 7); }
.bg-gray-lighter-left-8  { @include bg-fraction($gray-lighter, left, 8); }
.bg-gray-lighter-left-9  { @include bg-fraction($gray-lighter, left, 9); }
.bg-gray-lighter-left-10 { @include bg-fraction($gray-lighter, left, 10); }
.bg-gray-lighter-left-11 { @include bg-fraction($gray-lighter, left, 11); }
.bg-gray-lighter-left-12 { @include bg-fraction($gray-lighter, left, 12); }