:root {
    /* vehicle icons */
    --va-landplane-icon-url: url("../images/aircraft.png");
    --va-helicopter-icon-url: url("../images/helicopter-top.png");
    --va-ground-icon-url: url("../images/car-top.svg");
}

.vehicle-icon-container {
    & div.selected {
        filter: 
            drop-shadow(1px 0 0 var(--va-vehicle-icon-highlight-color))
            drop-shadow(-1px 0 0 var(--va-vehicle-icon-highlight-color))
            drop-shadow(0 1px 0 var(--va-vehicle-icon-highlight-color))
            drop-shadow(0 -1px 0 var(--va-vehicle-icon-highlight-color));
        will-change: filter;
    }

    .vehicle-icon {
        height: 20px;
        width: 20px;
        flex-shrink: 0;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-mode: alpha;
        border: none;
        opacity: 1;
        background-color: var(--va-aircraft-icon-default-color);

        &.landplane {
            mask-image: var(--va-landplane-icon-url);
        }

        &.helicopter {
            mask-image: var(--va-helicopter-icon-url);
        }

        &.ground {
            mask-image: var(--va-ground-icon-url);
        }

        svg path {
            fill: var(--va-aircraft-icon-default-color);
        }

        &.live-default-color {
            background-color: var(--va-aircraft-icon-default-color);
        }

        &.arrival-color {
            background-color: var(--va-aircraft-icon-arrival-color);
        }

        &.departure-color {
            background-color: var(--va-aircraft-icon-departure-color);
        }

        &.inactive-color {
            background-color: var(--va-aircraft-icon-inactive-color);
        }

        &.range-red-color {
            background-color: var(--va-range-red-color);
        }

        &.range-orange-color {
            background-color: var(--va-range-orange-color);
        }

        &.range-yellow-color {
            background-color: var(--va-range-yellow-color);
        }

        &.range-green-color {
            background-color: var(--va-range-green-color);
        }

        &.deicing-color {
            background-color: var(--va-deicing-color);
        }

        &.diversion-color {
            background-color: var(--va-diversion-color);
        }

        &.filtered-out {
            background-color: var(--va-aircraft-icon-filtered-out-color);

            svg path {
                fill: var(--va-aircraft-icon-filtered-out-color);
            }
        }
    }
}