
// Responsive visibility utilities
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
}

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

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

@mixin table-full-colored-variant($color) {
  background-color: lighten($color, 40%);
  > thead > tr {
    > th,
    > td { background-color: $color; }
  }
  > tbody > tr {
    > th,
    > td { color: darken($color, 20%); }
  }
}

@mixin accordion-head-variant($color) {
  .card-header a { background-color: $color; }
  .card-header a.collapsed { color: $color; }
}

@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;
      }
    }
  }
}

@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; }
  }
}

@mixin toggle-variant($color) {
  .toggle-on.active {
    background-color: $color;
    + .toggle-blob { border: 3px solid $color; }
  }
}

// TABLE MIXIN
@mixin table-full-colored-variant($head-bg, $body-bg) {
  > thead > tr {
    > th,
    > td { background-color: $head-bg; }
  }

  > tbody > tr {
    > th,
    > td {
      background-color: $body-bg;
      color: darken($head-bg, 20%);
    }
  }

  &.table-striped {
    tbody tr:nth-of-type(2n+1) {
      background-color: transparent;
      > th,
      > td { background-color: darken($body-bg,5%); }
    }
  }
}

// INPUT FILE BROWSER
@mixin input-file-bd-variant($color) {
  border: 2px solid $color;
  color: $color;

  &:hover {
    color: darken($color, 5%);
    border-color: darken($color, 5%);
  }
}

@mixin if-color-variant($color) {
  color: $color;
  .icon-wrapper { background-color: $color; }
}

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