@charset "utf-8";
@import "../../common/helpers/mixins";
// Bar Mixins
// --------------------------------------------------

@mixin bar-style($bg-color, $border-color, $color) {
  border-color: $border-color;
  background-color: $bg-color;
  background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
  color: $color;

  .title {
    color: $color;
  }
}


// Tab Mixins
// --------------------------------------------------

@mixin tab-style($bg-color, $border-color, $color) {
  border-color: $border-color;
  background-color: $bg-color;
  background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
  color: $color;
}

@mixin tab-badge-style($bg-color, $color) {
  .tab-item .badge {
    background-color: $bg-color;
    color: $color;
  }
}


// Item Mixins
// --------------------------------------------------

@mixin item-style($bg-color, $border-color, $color) {
  border-color: $border-color;
  background-color: $bg-color;
  color: $color;
}

@mixin item-active-style($active-bg-color, $active-border-color) {
  border-color: $active-border-color;
  background-color: $active-bg-color;
}


// Badge Mixins
// --------------------------------------------------

@mixin badge-style($bg-color, $color) {
  background-color: $bg-color;
  color: $color;
}


// Range Mixins
// --------------------------------------------------

@mixin range-style($track-bg-color) {
  &::-webkit-slider-thumb:before {
    background: $track-bg-color;
  }
}


// Checkbox Mixins
// --------------------------------------------------

@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
  & input:before,
  & .checkbox-icon:before {
    border-color: $off-border-color;
  }

  // what the background looks like when its checked
  & input:checked:before,
  & input:checked + .checkbox-icon:before {
    background: $on-bg-color;
    border-color: $on-border-color;
  }
}


// Toggle Mixins
// --------------------------------------------------

@mixin toggle-style($on-border-color, $on-bg-color) {
  // the track when the toggle is "on"
  & input:checked + .track {
    border-color: $on-border-color;
    background-color: $on-bg-color;
  }
}

@mixin responsive-grid-break($selector, $max-width) {
  @media (max-width: $max-width) {
    #{$selector} {
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;

      .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
        @include flex(1);
        margin-bottom: ($grid-padding-width * 3) / 2;
        margin-left: 0;
        max-width: 100%;  
        width: 100%;
      }
    }
  }
}

// Labels
@mixin label-variant($color,$fontcolor,$border-color) {
  color:$fontcolor;
  background-color: $color;
  border-color: $border-color;

  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}