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

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

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

//
// Mobile Tweaks
//

@media only screen {
  // Add Kart form
  label.fb {
    margin: 0;
  }
  .fb > input[type=radio] {
    display: none;
  }
  input[type=radio] + img {
    cursor: pointer;
    border: 5px solid transparent;
  }
  input[type=radio]:checked + img {
    border: 5px solid $red-base;
  }
  .stat,
  .name {
    color: #666;
    text-align: center;
    font-weight: normal;
    font-size: 0.9em;
  }
  .stat-header {
    font-weight: bold;
    font-size: 0.7em;
  }
  label.fb-character img {
    width: 55px;
    height: 55px;
  }
  label.fb-kart img,
  label.fb-wheel img,
  label.fb-glider img {
    width: 105px;
    height: 69px;
  }
  #accordion {
    .panel-heading {
      cursor: pointer;
    }
    margin-bottom: 1em;
  }
  .panel-title,
  .panel-stats {
    padding-left: 0;
    padding-right: 0;
  }
  .icon {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 2px;
    border-radius: 6px;
  }
  input[type=radio]:checked + .icon {
    border: 3px solid $red-base;
    padding: 3px;
    background-color: lighten($red-base, 20%);
  }
  div.similar {
    border: 2px solid lighten($blue-base, 30%);
    padding: 4px;
    background-color: lighten($blue-base, 40%);
  }
  span.selected {
    color: $red-base;
  }
  span.similar {
    color: $blue-base;
  }
  #collapseKart .icon img,
  #collapseWheel .icon img,
  #collapseGlider .icon img {
    width: 50px;
    height: 32px;
    padding: 2px;
    width: 54px;
    height: 36px;
  }
}

.add-header {
  padding-top: 1em;
}

.stat-header:hover {
  cursor: help;
}

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

//
// Tablet Tweaks
//

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

//
// 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                  */
/* ====================== */

// Inefficient Accelerations
.inefficient-1 {
  background-color: $inefficient-low;
}

.inefficient-2 {
  background-color: $inefficient-medium;
}

.inefficient-3 {
  background-color: $inefficient-high;
}

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

@media print {}
