/*
 * Include here all styles from components that extend from bootstrap.
 * This removes the need to @import bootstrap into those component,
 * thus reducing the final css size.
*/

cd-info-card {
  .card {
    @extend .pb-2;

    .card-body {
      .card-title {
        @extend .pl-2;
      }

      .card-text {
        @extend .pt-2;
      }
    }
  }
}

.btn-toolbar cd-table-actions.btn-group {
  @extend .mr-2;
}

cd-table {
  .cd-datatable {
    .datatable-footer {
      @extend .p-2;

      .datatable-pager {
        ul {
          @extend .pagination;

          li {
            @extend .page-item;

            a {
              @extend .page-link;
            }
          }
        }
      }
    }
  }
}

cd-health {
  cd-info-card {
    @extend .d-flex;
    @extend .flex-column;
    @extend .mb-4;

    @extend .col-12;
    @extend .col-sm-12;
    @extend .col-md-6;
    @extend .col-lg-4;

    &.cd-status-card {
      @extend .col-xl-3;
    }

    &.cd-performance-card,
    &.cd-capacity-card {
      @extend .col-xl;
    }

    &.cd-capacity-card {
      @extend .col-lg-3;
    }

    &.cd-performance-card {
      @extend .col-lg-6;
    }

    &.cd-chart-card {
      @extend .col-md-12;
      @extend .col-lg-6;
      @extend .col-xl-4;
      @extend .col-2xl-3;
    }
  }
}

cd-logs {
  label {
    @extend .mr-2;
  }

  .form-inline > .form-group {
    @extend .mr-3;
    @extend .mb-3;
  }
}

cd-about {
  dl {
    @extend .row;
  }

  dt {
    @extend .col-4;
    @extend .font-weight-bold;
  }

  dd {
    @extend .col-8;
  }
}

.cd-header,
legend {
  @extend .pb-1;
  @extend .mt-4;
  @extend .mb-4;
  @extend .border-bottom;
}

// All '.fa' icons will have fixed width
.fa {
  @extend .fa-fw;
}

pre:not(cd-api-docs *) {
  @extend .card;
  @extend .bg-light;
  @extend .p-2;
}