@import 'scss/styles.scss';

.fleet-filter-container {
    cursor: pointer;
}

.fleet-filter-dropdown-container {
    max-height: 306px;

    .fleet-filter-list-container {
        overflow-y: scroll;

        &::-webkit-scrollbar {
            width: 2px !important;
            border-radius: 1px;
        }

        &::-webkit-scrollbar-track {
            background: $ta-black-2 !important;
        }

        &::-webkit-scrollbar-thumb {
            background: $muted !important;
        }
    }
}

.search-input-header {
    transition: transform 0.3s;

    ::ng-deep .input-form-holder {
        .input-custom-group {
            .input-control {
                height: 22px !important;
                background-color: $ta-black !important;
                color: $white;

                &.has-placeholderIcon {
                    padding-left: 25px !important;
                }

                &:hover {
                    background-color: $grey-2 !important;
                }
            }

            .input-icon {
                left: 2px !important;
                svg-icon {
                    svg {
                        width: 14px;
                        height: 14px;
                    }
                }
                &::after {
                    left: 18px;
                }
            }

            .input-label {
                top: 2px !important;

                &.input-placeholderIcon-on {
                    left: 25px;
                }
            }

            .input-clear {
                top: 10px !important;
            }

            .input-clear-x {
                svg {
                    width: 14px !important;
                    height: 14px !important;
                }

                &:hover {
                    svg {
                        width: 16px !important;
                        height: 16px !important;
                    }
                }
            }
        }
    }
}

.fleet-filter-item-icon {
    svg {
        height: 18px !important;
    }

    // TRUCKS
    &.ic_truck_semi-truck {
        svg {
            path {
                fill: $ta-green;
            }
        }
    }

    &.ic_truck_semi-wSleeper {
        svg {
            path {
                fill: $ta-yellow-1;
            }
        }
    }

    &.ic_truck_box-truck {
        svg {
            path {
                fill: $ta-red-10;
            }
        }
    }

    &.ic_truck_cargo-van {
        svg {
            path {
                fill: $ta-blue-13;
            }
        }
    }

    &.ic_truck_tow-truck {
        svg {
            path {
                fill: $ta-purple-1;
            }
        }
    }

    &.ic_truck_car-hauler {
        svg {
            path {
                fill: $ta-red-18;
            }
        }
    }

    &.ic_truck_spotter {
        svg {
            path {
                fill: $ta-orange-5;
            }
        }
    }

    // TRAILERS
    &.ic_trailer_reefer {
        svg {
            path {
                fill: $ta-blue-13;
            }
        }
    }

    &.ic_trailer_dryvan {
        svg {
            path {
                fill: $ta-blue-24;
            }
        }
    }

    &.ic_trailer_side-kit {
        svg {
            path {
                fill: $ta-orange-4;
            }
        }
    }

    &.ic_trailer_conestoga {
        svg {
            path {
                fill: $ta-yellow-8;
            }
        }
    }

    &.ic_trailer_dumper {
        svg {
            path {
                fill: $ta-purple-1;
            }
        }
    }

    &.ic_trailer_container {
        svg {
            path {
                fill: $ta-yellow-1;
            }
        }
    }

    &.ic_trailer_tanker {
        svg {
            path {
                fill: $ta-green-6;
            }
        }
    }

    &.ic_trailer_carhauler {
        svg {
            path {
                fill: $ta-red-18;
            }
        }
    }

    &.ic_trailer_flatbed {
        svg {
            path {
                fill: $ta-red-13;
            }
        }
    }

    &.ic_trailer_low-boy {
        svg {
            path {
                fill: $ta-red-11;
            }
        }
    }

    &.ic_trailer_chassis {
        svg {
            path {
                fill: $ta-orange-5;
            }
        }
    }

    &.ic_trailer_step-deck {
        svg {
            path {
                fill: $ta-red-10;
            }
        }
    }

    &.ic_trailer_tanker-pneumatic {
        svg {
            path {
                fill: $ta-green;
            }
        }
    }

    &.ic_carhauler_stinger {
        svg {
            path {
                fill: $ta-red-19;
            }
        }
    }
}

.fleet-filter-list-item-container {
    &:hover {
        .fleet-filter-item-icon {
            display: flex !important;
        }
    }
}