.btn {
  @extend .waves-effect, .waves-light;
  background-color: $button-color;
  color: $button-text-color;
  font-size: $button-font-size;
  padding: $button-top-bottom-padding $button-side-padding;
  line-height: 1;

  &:hover, &:focus {
    background-color: lighten($button-color, 10%);
  }
}

.search-btn, .export-btn, .submit-btn, .page-btn, .browse-btn, .btn-no-accent,
  .export-results-btn, .save-preset-btn {
  @extend .btn;
}

.btn-flat {
  color: $accent-color;
}


.btn-no-accent {
  background-color: $btn-no-accent-bg-color;
  color: $btn-no-accent-text-color;

  &:hover {
    color: $button-text-color;
  }

  &:focus {
    background-color: darken($btn-no-accent-bg-color, 10%);
  }
}

.search-btn {
  margin-left: 0.5rem;
}

.submit-btn {
  @extend .right;
}

.save-preset-btn {
  background-color: $yellow-alert-color;
  color: $body-bg-color;

  &:hover {
    background-color: lighten($yellow-alert-color, 10%);
  }
}

.page-btn, .browse-btn {
  text-transform: none;
}

.export-btn {
  margin-top: 0.5rem;
}

.browse-btn {
  font-size: 1.1rem;
}

.form-group > label, label.active, .input-field > label {
  color: $text-color;
  font-size: 1.2rem;
}

input[type=checkbox] + span {
  color: $text-color;
  font-size: 1.2rem !important;
}

input[type=checkbox]:checked + span::after {
  background-color: $accent-color !important;
}

// .input-field .form-control:focus {
//   border-bottom-color: $accent-color;
// }

.dropdown-content li {
  background-color: $body-bg-color;
}

.form-control, .select-dropdown {
  background-color: $body-bg-color;
  color: $text-color;
}

.form-group {
  margin-top: 2em;
}

input::placeholder {
  color: $dim-text-color;
}

input[type=range] {
  display: block;
  width: 80%;
  margin: 1em auto 1.5em;
  border-color: $range-border-color;
  border-radius: 6px;

  // .value {
  //   color: $accent-color;
  // }

  &::-webkit-slider-runnable-track {
    background-color: $range-track-color;
    height: $range-track-height;
  }

  &::-webkit-slider-thumb {
    background-color: $range-thumb-color;
    height: $range-thumb-height;
    width: $range-thumb-width;
    // This will probably need some adjusting...
    margin-top: $range-thumb-height * -0.5 + 2;
    // transform-origin: 50% 50%;
  }
}

#message {
  color: $submit-message-color;
  font-weight: bold;
}

// #submit-message .hide {
//   animation: fadeout 0.4s linear;
//   -webkit-animation: fadeout 0.4s;
// }

#message .hidden {
  visibility: hidden;
}

// #submit-message .show {
//   animation: fadein 0.8s linear;
//   -webkit-animation: fadein 0.8s;
// }

#message .shown {
  visibility: visible;
}

.form-group p {
  margin-top: 1em;
  margin-left: 0;
}

.modal {
  background-color: $modal-main-bg-color;
  color: $text-color;

  .modal-cancel {
    color: $red-alert-color;
  }

  .modal-footer {
    background-color: $modal-main-bg-color;
    color: $text-color;
  }

  .datepicker-date-display, .timepicker-digital-display {
    background-color: $modal-display-bg-color;
  }

  .timepicker-plate {
    background-color: $modal-clock-bg-color;
  }

  .timepicker-canvas line {
    stroke: $accent-color;
  }

  .timepicker-canvas circle {
    fill: $accent-color;
  }

  .timepicker-dial .timepicker-tick {
    color: $text-color;
  }

  .month-next svg, .month-prev svg {
    fill: $text-color;
  }

  .datepicker-clear, .timepicker-clear {
    color: $modal-warn-btn-text-color;
  }

  .is-today .datepicker-day-button {
    color: $accent-color;
  }
}

fieldset {
  border-radius: 5px;
}

// #savedir {
//   display: inline-block;
//   width: 85%;
// }

// #save-prefs {
//   margin-top: 4rem;
// }