@import "bootstrap/variables";
@import "variables.scss";

/* ====================== */
/* Typography             */
/* ====================== */

.total-count {
  font-style: italic;
  font-size: 0.7em;
}

/* ====================== */
/* Layout                 */
/* ====================== */

//
// Mobile Tweaks
//

@media only screen {
  // ul.pie-legend {
  //   li {
  //     padding-left: 15px;
  //   }
  //   font-size: 0.8em;
  //   list-style-type: none;
  //   float: right;
  // }
  #charactersLegend,
  #kartsLegend,
  #wheelsLegend,
  #glidersLegend {
    display: none;
  }
  .chart-container {
    margin-left: -1em;
    margin-right: -1em;
  }
  .well {
    text-align: center;
  }
  .legend {
    width: 14em;
    max-height: 249px;
    border: 1px solid #ccc;
    float: right;
    font-size: 0.6em;
    overflow: hidden;
  }
  .legend .title {
    display: block;
    margin: 0.5em;
    border-style: solid;
    border-width: 0 0 0 1em;
    padding: 0 0.3em;
  }
}

@media only screen and (min-width: $screen-xs-min) {}

//
// Tablet Tweaks
//

@media only screen and (min-width: $screen-sm-min) {
  #charactersLegend,
  #kartsLegend,
  #wheelsLegend,
  #glidersLegend {
    display: inline-block;
  }
}

//
// Medium Desktop Tweaks
//

@media only screen and (min-width: $screen-md-min) {}

//
// Large Desktop Tweaks
//

@media only screen and (min-width: $screen-lg-min) {}

/* ====================== */
/* Color                  */
/* ====================== */

.total-count {
  color: $footer-text;
}

/* ====================== */
/* Print                  */
/* ====================== */

@media print {}
