// * Card Analytics
// *******************************************************************************
@use '../_bootstrap-extended/include' as light;
@use '../_bootstrap-extended/include-dark' as dark;
@import '../_custom-variables/pages';

// Report list section style
.report-list {
  .report-list-item {
    padding: 0.75rem 1rem;
  }
  .report-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
  }
}

// Vehicles overview progress labels
.vehicles-progress-labels {
  .vehicles-progress-label {
    position: relative;
    padding-bottom: 15px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: inline-block;
      height: 10px;
      width: 2px;
      [dir='rtl'] & {
        left: unset;
        right: 0;
      }
    }
  }
}

// Vehicles overview progress
.vehicles-overview-progress {
  .bg-gray-900 {
    color: light.$white;
  }
}

// Shipment statistics chart legend
#shipmentStatisticsChart,
#carrierPerformance {
  .apexcharts-legend-series {
    padding: 4px 12px;
    padding-inline-start: 17px;
    border-radius: light.$border-radius;
    height: 83%;
  }
}

// Report list section light style
@if $enable-light-style {
  .light-style {
    .report-list {
      .report-list-item {
        background-color: light.$gray-60;
      }
      .report-list-icon {
        background-color: light.$card-bg;
        border-radius: light.$border-radius;
      }
    }
    .vehicles-progress-labels {
      .vehicles-progress-label {
        &::after {
          background-color: light.$border-color;
        }
      }
    }
    .vehicles-overview-progress {
      .snackbar {
        background-color: #22303e;
      }
    }
    #shipmentStatisticsChart,
    #carrierPerformance {
      .apexcharts-legend-series {
        border: 1px solid light.$border-color;
      }
    }
  }
}

// Report list section dark style
@if $enable-dark-style {
  .dark-style {
    .report-list {
      .report-list-item {
        background-color: dark.$gray-60;
      }
      .report-list-icon {
        background-color: dark.$card-bg;
        border-radius: dark.$border-radius;
      }
    }
    .vehicles-progress-labels {
      .vehicles-progress-label {
        &::after {
          background-color: dark.$border-color;
        }
      }
    }
    .vehicles-overview-progress {
      .snackbar {
        background-color: #e6e6f1;
      }
    }
    #shipmentStatisticsChart,
    #carrierPerformance {
      .apexcharts-legend-series {
        border: 1px solid dark.$border-color;
      }
    }
  }
}