//
// Mixins
// --------------------------------------------------


// Mixin for better table highlight states
@mixin purple-table-row-variant($state, $background, $color) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.#{$state},
    > th.#{$state},
    &.#{$state} > td,
    &.#{$state} > th {
      background-color: $background;
      color: $color;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.#{$state}:hover,
    > th.#{$state}:hover,
    &.#{$state}:hover > td,
    &.#{$state}:hover > th {
      background-color: darken($background, 2.5%);
    }
  }
}

// Target retina devices
@mixin retina {
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    @content;
  }
}

// Override button-variant mixin from Bootstrap
@mixin purple-button-variant($color, $background, $gradient) {
  color: $color !important;
  background-color: $background;

  background-image: -webkit-gradient(
  	linear,
  	left top,
  	right bottom,
  	color-stop(0, rgba($gradient, 0)),
  	color-stop(1, rgba($gradient, 1))
  );
  background-image: -o-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
  background-image: -moz-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
  background-image: -webkit-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
  background-image: -ms-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
  background-image: linear-gradient(to left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: tint($background, 10%) !important;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: shade($background, 1%) !important;
    box-shadow: inset 0 0 0 1px rgba(#000, .1) !important;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background: rgba($gray-lighter, .3) !important;
      box-shadow: inset 0 0 0 1px $gray-light !important;
      color: $gray-light !important;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

@mixin purple-button-variant-alt($button-color) {
  color: $button-color !important;
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba($button-color, .6);

  &:hover {
    background: rgba($button-color, .1) !important;
    box-shadow: inset 0 0 0 1px rgba($button-color, .6);
  }

  &:active,
  &.active {
    background: rgba($button-color, .2) !important;
    box-shadow: inset 0 0 0 1px rgba($button-color, .8) !important;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background: rgba($gray-light, .1) !important;
      box-shadow: inset 0 0 0 1px $gray-light !important;
      color: $gray-light !important;
    }
  }

  .badge {
    color: #fff;
    background-color: $button-color;
  }
}