@import 'theme/variables.scss';

.trucks,
.trailers {
  &.semitruck,
  &.semisleeper,
  &.flatbed,
  &.stepdeck,
  &.lowboyrgn,
  &.chassis,
  &.conestoga,
  &.sidekit,
  &.container {
    svg {
      path {
        fill: $ta-blue-19;
      }
    }
  }

  &.boxtruck,
  &.reefertruck,
  &.cargovan,
  &.dryvan,
  &.reefer {
    svg {
      path {
        fill: $ta-yellow-4;
      }
    }
  }

  &.dumptruck,
  &.cementtruck,
  &.garbagetruck,
  &.enddump,
  &.bottomdump,
  &.hopper,
  &.tanker,
  &.pneumatictanker {
    svg {
      path {
        fill: $ta-red-13;
      }
    }
  }

  &.towtruck,
  &.carhauler,
  &.spotter,
  &.carhauler,
  &.carhaulerstigner {
    svg {
      path {
        fill: $ta-green-4;
      }
    }
  }

  .svgtext-template-text {
    color: $white-2;
    transition: color 0.3s ease-in-out;
  }
}

// --------------------- Colors ---------------------
.colors {
  .black {
    svg {
      #droplet {
        fill: $bw6-2;
      }
    }
  }
  .brown {
    svg {
      #droplet {
        fill: $bw-11;
      }
    }
  }
  .darkgreen {
    svg {
      #droplet {
        fill: $green-3;
      }
    }
  }
  .lightgreen {
    svg {
      #droplet {
        fill: $green-14;
      }
    }
  }
  .darkblue {
    svg {
      #droplet {
        fill: $blue-16;
      }
    }
  }
  .lightblue {
    svg {
      #droplet {
        fill: $blue-17;
      }
    }
  }
  .gray {
    svg {
      #droplet {
        fill: $grey-3;
      }
    }
  }
  .purple {
    svg {
      #droplet {
        fill: $purple-6;
      }
    }
  }
  .gold {
    svg {
      #droplet {
        fill: $yellow-8;
      }
    }
  }
  .silver {
    svg {
      #droplet {
        fill: $bw-9;
      }
    }
  }
  .red {
    svg {
      #droplet {
        fill: $red-12;
      }
    }
  }
  .pink {
    svg {
      #droplet {
        fill: $pink-2;
      }
    }
  }
  .white {
    svg {
      #droplet {
        fill: $ca-white;
      }
    }
  }
  .orange {
    svg {
      #droplet {
        fill: $orange;
      }
    }
  }
  .yellow {
    svg {
      #droplet {
        fill: $yellow-9;
      }
    }
  }

  &:hover {
    transition: all 0.3s ease-in-out;
    .black {
      svg {
        #droplet {
          fill: $ta-light-grey-3;
        }
      }
    }
    .brown {
      svg {
        #droplet {
          fill: $brown;
        }
      }
    }
    .darkgreen {
      svg {
        #droplet {
          fill: $ta-review-green-2;
        }
      }
    }
    .lightgreen {
      svg {
        #droplet {
          fill: $green-15;
        }
      }
    }
    .darkblue {
      svg {
        #droplet {
          fill: $blue-18;
        }
      }
    }
    .lightblue {
      svg {
        #droplet {
          fill: $blue-20;
        }
      }
    }
    .gray {
      svg {
        #droplet {
          fill: $muted;
        }
      }
    }
    .purple {
      svg {
        #droplet {
          fill: $special-filter-purple-2;
        }
      }
    }
    .gold {
      svg {
        #droplet {
          fill: $yellow-11;
        }
      }
    }
    .silver {
      svg {
        #droplet {
          fill: $bw4;
        }
      }
    }
    .red {
      svg {
        #droplet {
          fill: $red-4;
        }
      }
    }
    .pink {
      svg {
        #droplet {
          fill: $pink-3;
        }
      }
    }
    .white {
      svg {
        #droplet {
          fill: $white-2;
        }
      }
    }
    .orange {
      svg {
        #droplet {
          fill: $ta-orange-1;
        }
      }
    }
    .yellow {
      svg {
        #droplet {
          fill: $yellow-10;
        }
      }
    }
  }
}