// * Logistics Overview
// *******************************************************************************

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

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

// Shipment statistics chart legend
#shipmentStatisticsChart {
  .apexcharts-legend-series {
    padding: 5px 15px;
    border-radius: light.$border-radius-lg;
    height: 83%;
  }
}

//Light style
@if $enable-light-style {
  .light-style {
    .vehicles-progress-labels {
      .vehicles-progress-label {
        &::after {
          background-color: light.$border-color;
        }
      }
    }
    .vehicles-overview-progress {
      .bg-gray-900 {
        background-color: #282a42;
        color: light.$card-bg;
      }
    }
    #shipmentStatisticsChart {
      .apexcharts-legend-series {
        border: 1px solid light.$border-color;
      }
    }
  }
}

//Dark style
@if $enable-dark-style {
  .dark-style {
    .vehicles-progress-labels {
      .vehicles-progress-label {
        &::after {
          background-color: dark.$border-color;
        }
      }
    }
    .vehicles-overview-progress {
      .bg-gray-900 {
        background-color: #f5f5f5;
        color: dark.$card-bg;
      }
    }
    #shipmentStatisticsChart {
      .apexcharts-legend-series {
        border: 1px solid dark.$border-color;
      }
    }
  }
}
