//
// General: Mixins
//


// Cards Variant
@mixin cards-variant($name, $color) {
    .card-#{$name} {
      &:not(.card-outline) {
        > .card-header {
          background-color: $color;
          border-bottom: 0;
  
          &,
          a {
            color: color-yiq($color);
          }
  
          a.active {
            color: color-yiq($white);
          }
  
          .nav-item {
            &:first-child .nav-link {
              margin-left: unset;
              margin-right: -1px;
            }
          }
        }
      }
  
      &.card-outline {
        border-top: 3px solid $color;
  
        .nav-item {
          border-bottom: 0;
  
          &:first-child .nav-link {
            border-left: unset;
            margin-left: unset;

            border-right: 0;
            margin-right: 0;
          }
        }
      }
  
      &.card-outline-tabs {
        border-top: 0;
  
        > .card-header {
          .nav-item {
            &:first-child .nav-link {
                border-left: unset;
                border-right: 0;
                margin-left: unset;
                margin-right: 0;
            }
          }
  
          a {
            border-top: 3px solid transparent;
  
            &:hover {
              border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
              margin-top: 2px;
            }
  
            &.active {
              &:hover {
                margin-top: 0;
              }
  
              border-top: 3px solid $color;
            }
          }
        }
      }
    }
  
    .bg-#{$name},
    .bg-gradient-#{$name},
    .card-#{$name}:not(.card-outline) {
      .btn-tool {
        color: rgba(color-yiq($color), 0.8);
  
        &:hover {
          color: color-yiq($color);
        }
      }
    }
  
    .card.bg-#{$name},
    .card.bg-gradient-#{$name} {
      .bootstrap-datetimepicker-widget {
        .table td,
        .table th {
          border: none;
        }
  
        table thead tr:first-child th:hover,
        table td.day:hover,
        table td.hour:hover,
        table td.minute:hover,
        table td.second:hover {
          background: darken($color, 8%);
          color: color-yiq($color);
        }
  
        table td.today::before {
          border-bottom-color: color-yiq($color);
        }
  
        table td.active,
        table td.active:hover {
          background: lighten($color, 10%);
          color: color-yiq($color);
        }
      }
    }
  }
  
  
  // Sidebar Mini Breakpoints
  @mixin sidebar-mini-breakpoint() {
    // A fix for text overflow while transitioning from sidebar mini to full sidebar
    .nav-sidebar,
    .nav-sidebar > .nav-header,
    .nav-sidebar .nav-link {
      white-space: nowrap;
      overflow: hidden;
    }
  
    // When the sidebar is collapsed...
    &.sidebar-collapse {
      .d-hidden-mini {
        display: none;
      }
  
      // Apply the new margins to the main content and footer
      .content-wrapper,
      .main-footer,
      .main-header {
          margin-left: unset !important;
          margin-right: $sidebar-mini-width !important;
      }
  
      // Make the sidebar headers
      .nav-sidebar .nav-header {
        display: none;
      }
  
      .nav-sidebar .nav-link p {
        width: 0;
      }
  
      .sidebar .user-panel > .info,
      .nav-sidebar .nav-link p,
      .brand-text {
        margin-left: unset;
        margin-right: -10px;
        opacity: 0;
        visibility: hidden;
      }
  
      .logo-xl {
        opacity: 0;
        visibility: hidden;
      }
  
      .logo-xs {
        display: inline-block;
        opacity: 1;
        visibility: visible;
      }
  
      // Modify the sidebar to shrink instead of disappearing
      .main-sidebar {
        overflow-x: hidden;
  
        &,
        &::before {
          // Don't go away! Just shrink
          margin-left: unset;
          margin-right: 0;
          width: $sidebar-mini-width;
        }
  
        .user-panel {
          .image {
            float: none;
          }
        }
  
        &:hover,
        &.sidebar-focused {
          width: $sidebar-width;
  
          .nav-sidebar.nav-child-indent .nav-treeview {
            padding-left: unset;
            padding-right: 1rem;
          }
  
          .brand-link {
            width: $sidebar-width;
          }
  
          .user-panel {
            text-align: right;
  
            .image {
              float: right;
            }
          }
  
          .user-panel > .info,
          .nav-sidebar .nav-link p,
          .brand-text,
          .logo-xl {
            display: inline-block;
            margin-left: unset;
            margin-right: 0;
            opacity: 1;
            visibility: visible;
          }
  
          .nav-flat {
            .nav-icon {
              margin-left: unset;
              margin-right: 0;
            }
  
            .nav-treeview {
              .nav-icon {
                margin-left: unset;
                margin-right: -.2rem;
              }
            }
          }
  
          .logo-xs {
            opacity: 0;
            visibility: hidden;
          }
  
          .brand-image {
            margin-right: .8rem;
            margin-left: .5rem;
          }
  
          // Make the sidebar links, menus, labels, badges
          // and angle icons disappear
          .sidebar-form,
          .user-panel > .info {
            display: block !important;
            -webkit-transform: translateZ(0);
          }
  
          .nav-sidebar > .nav-item > .nav-link > span {
            display: inline-block !important;
          }
        }
      }
  
      // Make an element visible only when sidebar mini is active
      .visible-sidebar-mini {
        display: block !important;
      }
  
      &.layout-fixed {
        .main-sidebar:hover {
          .brand-link {
            width: $sidebar-width;
          }
        }
  
        .brand-link {
          width: $sidebar-mini-width;
        }
      }
    }
  }
  
  
  // Direct Chat Variant
  @mixin direct-chat-variant($bg-color, $color: #fff) {
    .right > .direct-chat-text {
      background: $bg-color;
      border-color: $bg-color;
      color: color-yiq($bg-color);
  
      &::after,
      &::before {
        border-left-color: $bg-color;
      }
    }
  
    @each $name, $color in $theme-colors {
      &.bg-#{$name},
      &.bg-gradient-#{$name} {
        .direct-chat-timestamp {
          @if (color-yiq($color) == $yiq-text-dark) {
            color: lighten(color-yiq($color), 10%);
          } @else {
            color: darken(color-yiq($color), 20%);
          }
        }
      }
    }
  
    @each $name, $color in $colors {
      &.bg-#{$name},
      &.bg-gradient-#{$name} {
        .direct-chat-timestamp {
          @if (color-yiq($color) == $yiq-text-dark) {
            color: lighten(color-yiq($color), 10%);
          } @else {
            color: darken(color-yiq($color), 20%);
          }
        }
      }
    }
  }