//
// Component: Cards
//

.card {
    &.maximized-card {
      right: 0;
      left: unset;
    }
  
    .border-right {
      border-left: 1px solid $card-border-color;
      border-right: unset;
    }
  
    .border-left {
      border-right: 1px solid $card-border-color;
      border-left: unset;
    }
  }
  
  // Box header
  .card-header {
  
    > .card-tools {
      float: left;
      margin-left: -$card-spacer-x / 2;
      margin-right: unset;
  
    }
  }
  
  .card-title {
    float: right;
  }
  
  .chart-legend {
  
      > li {
      @media (max-width: map-get($grid-breakpoints, sm)) {
        float: right;
        margin-left: 10px;
        margin-right: unset;
      }
    }
  }
  
  // Comment Box
  .card-comments {
  
    .card-comment {
  
      img {
        float: right;
      }
    }
  
    .comment-text {
      margin-right: 40px;
      margin-left: unset;
    }
  
  }
  
  // Widgets
  //-----------
  
  // Widget: TODO LIST
  .todo-list {
  
    // Todo list element
    > li {
      border-right: 2px solid $gray-200;
      border-left: unset;
  
      > input[type='checkbox'] {
        margin: 0 5px 0 10px;
      }
  
      .text {
        margin-right: 5px;
        margin-left: unset;
      }
  
      // Time labels
      .badge {
        margin-right: 10px;
        margin-left: unset;
      }
  
      // Tools and options box
      .tools {
        float: left;
  
        // icons
        > .fa,
        > .fas,
        > .far,
        > .fab,
        > .glyphicon,
        > .ion {
          margin-left: 5px;
          margin-right: unset;
        }
      }
    }
  
    // Color variants
    @each $name, $color in $theme-colors {
      .#{$name} {
        border-right-color: $color;
        border-left-color: unset;
      }
    }
  
    @each $name, $color in $colors {
      .#{$name} {
        border-right-color: $color;
        border-left-color: unset;
      }
    }
  }
  
  // END TODO WIDGET
  
  
  // Color variants
  @each $name, $color in $theme-colors {
    @include cards-variant($name, $color);
  }
  
  @each $name, $color in $colors {
    @include cards-variant($name, $color);
  }
  
  
  // Nav Tabs override
  .card-default {
    .nav-item {
      &:first-child .nav-link {
        border-right: 0;
        border-left: unset;
      }
    }
  }