
// Accordion One Variant
@mixin accordion-one-variant($color) {
  .card { border-color: $color; }

  .card-header a {
    &,
    &:hover,
    &:focus { color: $color; }

    &.collapsed {
      background-color: $color;
      color: #fff;

      &:hover,
      &:focus {
        background-color: darken($color, 5%);
        color: #fff;
      }
    }
  }
}

// Accordion Two Variant
@mixin accordion-two-variant($color, $secondary-color) {
  .card { border-color: $color; }

  .card-header a {
    background-color: $color;
    border-color: transparent;
    color: #fff;

    &.collapsed {
      background-color: $secondary-color;
      color: $color;

      &:hover,
      &:focus { background-color: darken($secondary-color, 2%); }
    }
  }
}

// Text hover
@mixin hover-color($color) {
  &:hover,
  &:focus { color: $color; }
}

@mixin hover-color-force($color) {
  &:hover,
  &:focus { color: $color !important; }
}

@mixin nav-color-variant($color, $hover-color, $active-color: $hover-color, $hover-bg-color: transparent, $active-bg-color: transparent) {
  .nav-link {
    color: $color;
    &:hover,
    &:focus {
      color: $hover-color;
      background-color: $hover-bg-color;
    }

    &.active {
      &,
      &:hover,
      &:focus {
        color: $active-color;
        background-color: $active-bg-color;
      }
    }
  }
}

@mixin nav-outline-variant($color, $hover-color, $active-color: $hover-color) {
  .nav-link {
    color: $color;
    &::before { border-color: $active-color; }

    &:hover,
    &:focus { color: $hover-color; }

    &.active {
      &,&:hover,&:focus {
        color: $active-color;
      }
    }
  }
}

@mixin nav-outline-active-variant($color) {
  .nav-link.active {
    &,&:hover,&:focus {
      color: $color;
      &::before { border-color: $color; }
    }
  }
}

@mixin pagination-variant($active-bg-color, $active-color: #fff, $text-color: $gray-600, $hover-text-color: $gray-800, $hover-bg-color: $gray-200) {
  .page-link {
    color: $text-color;

    &:hover,
    &:focus {
      color: $hover-text-color;
      background-color: $hover-bg-color;
    }
  }

  .active {
    .page-link {
      &,&:hover,&:focus {
        background-color: $active-bg-color;
        color: $active-color;
        border-color: transparent;
      }
    }
  }

  &.pagination-dark {
    .active {
      .page-link {
        background-color: $active-bg-color;
        color: $active-color;
      }
    }
  }
}

// ICON
@mixin iconwrap-size($padding, $icon-size) {
  padding: $padding;
  .fa,
  .icon {
    font-size: $icon-size;
    width: $icon-size;
    height: $icon-size;
  }
}

// TABLE HEAD VARIATIONS
@mixin table-head-variant($color, $text-color: #fff) {
  > tr > th,
  > tr > td {
    background-color: $color;
    color: $text-color;
    border-color: rgba(#fff, .5);
  }
}

@mixin full-table-variant($head-color, $body-color, $head-text-color: #fff) {
  background-color: $body-color;
  thead,
  tfoot {
    > tr > th,
    > tr > td {
      background-color: $head-color;
      color: $head-text-color;
    }
  }
}

@mixin tooltip-variant($color, $text-color: #fff) {
  .tooltip-inner {
    background-color: $color;
    color: $text-color;
  }

  &.bs-tooltip-top,
  &.bs-tooltip-auto[x-placement^="top"] {
    .arrow::before { border-top-color: $color; }
  }

  &.bs-tooltip-bottom,
  &.bs-tooltip-auto[x-placement^="bottom"] {
    .arrow::before { border-bottom-color: $color; }
  }

  &.bs-tooltip-left,
  &.bs-tooltip-auto[x-placement^="left"] {
    .arrow::before { border-left-color: $color; }
  }

  &.bs-tooltip-right,
  &.bs-tooltip-auto[x-placement^="right"] {
    .arrow::before { border-right-color: $color; }
  }
}

@mixin popover-title-variant($color, $text-color: #fff) {

  .popover-header {
    color: $text-color;
    background-color: $color;
  }

  &.bs-popover-bottom,
  &.bs-popover-auto[x-placement^="bottom"] {
    .arrow::after {
      border-bottom-color: $color;
    }
  }
}

@mixin popover-full-color($color) {
  background-color: $color;

  &.bs-popover-top,
  &.bs-popover-auto[x-placement^="top"] {
    .arrow::after { border-top-color: $color; }
  }

  &.bs-popover-bottom,
  &.bs-popover-auto[x-placement^="bottom"] {
    .arrow::after { border-bottom-color: $color; }
  }

  &.bs-popover-left,
  &.bs-popover-auto[x-placement^="left"] {
    .arrow::after { border-left-color: $color; }
  }

  &.bs-popover-right,
  &.bs-popover-auto[x-placement^="right"] {
    .arrow::after { border-right-color: $color; }
  }
}

@mixin rdiobox-color-variant($color) {
  input[type='radio']:checked {
    + span:before { background-color: $color; }
  }
}
