@import "../../bootstrap/scss/_mixins.scss";
@import "../../bootstrap/scss/_variables.scss";
@import "../mixins.scss";
@import "../variables.scss";
@import "../variables.md.scss";
@mixin active-variant($parent, $bg, $color) {
  .nav-active-#{$parent}{
    .nav-link.active,
    .nav > li.active > a{
      color: $color !important;
      background-color: $bg !important;
    }
  }
}
@mixin color-variant($bg, $color) {
  color: $color;
  background-color: $bg;
  .lt{
    background-color: lighten($bg, $color-percent);
  }
  .dk{
    background-color: darken($bg, $color-percent);
  }
  .bg{
    background-color: $bg;
  }
}
@mixin color-variant-ribbon($bg, $color) {
  background-color: $bg;
  color: $color;
  &:hover, &:focus, &:active{
    background-color: darken($bg,8%);
    color: lighten($bg,60%);
  }
  &:after {
    border-right-color: darken($bg,8%);
  }
  &[class*="right ribbon"]:after {
    border-color: transparent;
    border-top-color: darken($bg,8%);
  }
}
@mixin color-variant-shadow($bg, $color) {
  i{
    box-shadow: 0 0 0 1px darken($bg, 5%);
  }
  &:hover,&:focus,&:active,&.active{
    color: $bg;
    i{
      &:before{
        background-color: $bg;
      }
    }
  }
}
@mixin border-wariant($parent, $bg){
  $color: mix($bg, #fff, 10%);
  .b-#{$parent}{
    border-color: $bg;
  }
  .b-t-#{$parent}{
    border-top-color: $bg;
  }
  .b-r-#{$color}{
    border-right-color: $bg;
  }
  .b-b-#{$parent}{
    border-bottom-color: $bg;
  }
  .b-l-#{$parent}{
    border-left-color: $bg;
  }
}
@mixin text-wariant($parent, $bg){
  a.#{$parent}:hover{
    background-color: darken($bg, $color-percent);
  }
  a.text-#{$parent}:hover{
    color: darken($bg, $color-percent);
  }
  .text-#{$parent},
  .text-#{$parent}-hover a:hover{
    color: $bg;
  }
}
@mixin btn-outline($color, $color-color){
  &:hover,
  &:focus{
    color: $color-color;
    background-color: $color;
  }
}


.skin {
  @include color-variant($blue-500, $dark-white);
}
.shadow-skin {
  @include color-variant-shadow($blue-500, $dark-white);
}
.ribbon-skin {
  @include color-variant-ribbon($blue-500, $dark-white);
}
@include border-wariant(skin, $blue-500);
@include text-wariant(skin, $blue-500);
.btn{
  &.b-skin,
  &.skin{
    @include btn-outline($blue-500, $dark-white);
  }
}
#logo{
  fill:$blue-500;
}
.pace .pace-progress {
  background: $blue-500;
}
.pace .pace-activity {
  border-top-color:  $blue-500;
  border-left-color: $blue-500;
}
@include media-breakpoint-up(lg) {
  ::-webkit-scrollbar-thumb:hover{
    background-color:$blue-500;
  }
  ::selection {
    background-color: $blue-500;
  }
}
@include active-variant(skin, $blue-500, $dark-white);
.tabsbtn{
  background-color: transparent;
  border: 1px solid $blue-500;
  color: $blue-500;
  &.active,
  &:hover,
  &:focus{
    background-color: $blue-500;
    color: $dark-white !important;
  }
}