@import 'variables';

#trailsPanel {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;

  .trail {
    background-color: $green;
    border: 1px solid $green;
    margin: 5px 5px 5px 0;
    cursor: pointer;
    pointer-events: auto;
    padding: 4px 8px;
    font-size: $normal-font;

    &.disabled {
      cursor: default;
      background-color: white;
      border: 1px solid $disabled-gray;
      color: $disabled-gray;
      pointer-events: none;
    }

    &.disabled:hover {
      cursor: default;
      border: 1px solid $disabled-gray;
      color: $disabled-gray;
    }

    &.selected {
      background-color: $orange;
      border: 1px solid $orange;
    }
  }

  .trail:hover {
    background-color: $orange;
    border: 1px solid $orange;
  }

}

.removeSelected {
  background: none;
  border: none;
  border-bottom: 1px dashed $font-color;
  color: $font-color;
  font-family: 'Open Sans Condensed';
  font-size: $normal-font;
  line-height: $normal-font;
  padding: 0;
  cursor: pointer;

  &:disabled {
    border-bottom: 1px dashed $disabled-gray;
    color: $disabled-gray;
    cursor: default;
  }
}


#filterPanel {

  overflow: hidden;
  padding-bottom: 10px;

  .filter-category {
    font-size: $small-font;
    font-weight: bold;
    padding: 20px 0;
  }

  input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
    pointer-events: none;
  }

  label {
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px;
    &:hover {
      background: $green;
    }
  }

  input[type=radio]:checked + label{
    background: $green;
  }

  label + input[type=radio] + label {
    border-left: solid 1px $green;
  }

  .radio-group {
    border: solid 1px $green;
    display: inline-block;
  }

  .range-slider {
    display: inline-block;
    width: 200px;
    margin: 0 15px;
  }

  .noUi-tooltip {
    display: none;
  }

  .noUi-active .noUi-tooltip {
      display: block;
  }
}


