/*** Unit marker elements ***/
[data-object|="unit"] {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.unit-vvi {
    align-self: center;
    background: var(--secondary-gunmetal-grey);
    display: flex;
    justify-self: center;
    padding-bottom: calc((var(--unit-aircraft-width) / 2) + var(--unit-stroke-width));
    position: absolute;
    transform-origin: bottom;
    translate: 0 -50%;
    width: var(--unit-aircraft-vvi-width);
}

.unit-hotgroup {
    align-content: center;
    background-color: var(--background-steel);
    border-radius: var(--border-radius-xs);
    display: none;
    height: 15px;
    justify-content: center;
    position: absolute;
    transform: rotate(-45deg);
    translate: 0 -200%;
    width: 15px;
}

.unit-hotgroup-id {
    background-color: transparent;
    color: white;
    font-size: 9px;
    font-weight: bolder;
    transform: rotate(45deg);
    translate: -1px 1px;
}

.unit-icon {
    height: var(--unit-height);
    position: absolute;
    transform-origin: center;
    width: var(--unit-width);
}

[data-is-selected] .unit-icon::before {
    background-color: var(--unit-spotlight-fill);
    border-radius: 50%;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

/*** Basic colours ***/
[data-coalition="blue"] .unit-icon svg>*:first-child {
    fill: var(--unit-background-blue);
}

[data-coalition="red"] .unit-icon svg>*:first-child {
    fill: var(--unit-background-red);
}

[data-coalition="neutral"] .unit-icon svg>*:first-child {
    fill: var(--unit-background-neutral);
}

[data-is-selected] .unit-icon svg>*:first-child {
    fill: white;
}

[data-is-highlighted] .unit-icon svg>*:first-child {
    stroke: white;
}

/*** Cursors ***/
[data-is-dead],
[data-object|="unit-missile"],
[data-object|="unit-bomb"] {
    cursor: default;
}

/*** Labels ***/
[data-object|="unit"] .unit-short-label {
    color: var(--secondary-gunmetal-grey);
    font-size: var(--unit-font-size);
    font-weight: var(--unit-font-weight);
    line-height: normal;
    position: absolute;
}

/*** Fuel indicator ***/
[data-object|="unit"] .unit-fuel {
    background: white;
    border: var(--unit-aircraft-fuel-border-width) solid var(--secondary-dark-steel);
    border-radius: var(--border-radius-sm);
    display: none;
    height: var(--unit-aircraft-fuel-height);
    position: absolute;
    translate: var(--unit-aircraft-fuel-x) var(--unit-aircraft-fuel-y);
    width: var(--unit-aircraft-fuel-width);
}

[data-object|="unit"] .unit-fuel-level {
    background-color: var(--secondary-light-grey);
    height: 100%;
    width: 100%;
}

/*** Ammo indicator ***/
[data-object|="unit"] .unit-ammo {
    column-gap: var(--unit-aircraft-ammo-spacing);
    display: none;
    height: fit-content;
    position: absolute;
    translate: var(--unit-aircraft-ammo-x) var(--unit-aircraft-ammo-y);
    width: fit-content;
}

[data-object|="unit"] .unit-ammo>* {
    background-color: white;
    border: var(--unit-aircraft-ammo-border-width) solid var(--secondary-dark-steel);
    border-radius: 50%;
    padding: var(--unit-aircraft-ammo-radius);
}

/*** Unit summary ***/
[data-object|="unit"] .unit-summary {
    color: white;
    column-gap: 6px;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: bold;
    justify-content: right;
    line-height: 12px;
    pointer-events: none;
    position: absolute;
    row-gap: 1px;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    translate: -60px 0;
    width: fit-content;
}

[data-hide-labels] [data-object|="unit"] .unit-summary {
    display: none;
}

[data-object|="unit"] .unit-summary>* {
    padding: 1px;
}

[data-object|="unit"] .unit-summary .unit-callsign {
    color: white;
    overflow: hidden;
    text-align: right;
    transform-origin: right;
    white-space: nowrap;
    width: 80px;
}

[data-object|="unit"] .unit-summary .unit-callsign:hover {
    direction: rtl;
    overflow: visible;
}

/*** Common ***/
[data-object|="unit"]:hover .unit-ammo,
[data-object|="unit"]:hover .unit-fuel {
    display: flex;
}

@keyframes pulse {
    50% {
        opacity: 0;
    }
}

[data-object|="unit"][data-has-low-fuel] .unit-fuel {
    animation: pulse 1.5s linear infinite;
}

[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
[data-object|="unit"][data-is-selected] .unit-ammo,
[data-object|="unit"][data-is-selected] .unit-fuel,
[data-object|="unit"][data-is-selected] .unit-selected-spotlight {
    display: flex;
}

[data-object|="unit"][data-has-fox-1] .unit-ammo>div:nth-child(1),
[data-object|="unit"][data-has-fox-2] .unit-ammo>div:nth-child(2),
[data-object|="unit"][data-has-fox-3] .unit-ammo>div:nth-child(3),
[data-object|="unit"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
    background-color: var(--secondary-gunmetal-grey);
}

[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
    color: var(--secondary-blue-text);
}

[data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo>div:nth-child(1),
[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo>div:nth-child(2),
[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo>div:nth-child(3),
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
    background-color: var(--primary-blue);
}

[data-object|="unit"][data-coalition="blue"] .unit-vvi {
    background-color: var(--secondary-blue-outline);
}

[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
    color: var(--secondary-red-text);
}

[data-object|="unit"][data-coalition="red"] .unit-fuel-level,
[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo>div:nth-child(1),
[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo>div:nth-child(2),
[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo>div:nth-child(3),
[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo>div:nth-child(4) {
    background-color: var(--primary-red);
}

[data-object|="unit"][data-coalition="blue"] .unit-vvi {
    background-color: var(--secondary-red-outline);
}

/*** Unit state ***/
[data-object|="unit"] .unit-state {
    background-repeat: no-repeat;
    height: 20px;
    position: absolute;
    width: 20px;
    left: 0px;
    top: 0px;
}

[data-object|="unit"][data-state="rtb"] .unit-state {
    background-image: url("/resources/theme/images/states/rtb.svg");
}

[data-object|="unit"][data-state="land"] .unit-state {
    background-image: url("/resources/theme/images/states/rtb.svg");
}

[data-object|="unit"][data-state="idle"] .unit-state {
    background-image: url("/resources/theme/images/states/idle.svg");
}

[data-object*="groundunit"][data-state="idle"] .unit-state {
    background-image: url("");  /* To avoid clutter, dont show the idle state for non flying units */
}

[data-object|="unit"][data-state="attack"] .unit-state,
[data-object|="unit"][data-state="bombing point"] .unit-state,
[data-object|="unit"][data-state="carpet bombing"] .unit-state,
[data-object|="unit"][data-state="firing at area"] .unit-state {
    background-image: url("/resources/theme/images/states/attack.svg");
}

[data-object|="unit"][data-state="follow"] .unit-state {
    background-image: url("/resources/theme/images/states/follow.svg");
}

[data-object|="unit"][data-state="refuel"] .unit-state {
    background-image: url("/resources/theme/images/states/refuel.svg");
}

[data-object|="unit"][data-state="human"] .unit-state {
    background-image: url("/resources/theme/images/states/human.svg");
}

[data-object|="unit"][data-state="dcs"] .unit-state {
    background-image: url("/resources/theme/images/states/dcs.svg");
}

[data-object|="unit"][data-state="no-task"] .unit-state {
    background-image: url("/resources/theme/images/states/no-task.svg");
}

/*** Dead unit ***/
[data-object|="unit-aircraft"][data-is-dead] .unit-selected-spotlight,
[data-object|="unit-aircraft"][data-is-dead] .unit-short-label,
[data-object|="unit-aircraft"][data-is-dead] .unit-vvi,
[data-object|="unit-aircraft"][data-is-dead] .unit-hotgroup,
[data-object|="unit-aircraft"][data-is-dead] .unit-hotgroup-id,
[data-object|="unit-aircraft"][data-is-dead] .unit-state,
[data-object|="unit-aircraft"][data-is-dead] .unit-fuel,
[data-object|="unit-aircraft"][data-is-dead] .unit-ammo,
[data-object|="unit-aircraft"][data-is-dead]:hover .unit-fuel,
[data-object|="unit-aircraft"][data-is-dead]:hover .unit-ammo {
    display: none;
}

[data-object|="unit-aircraft"][data-is-dead] .unit-summary>* {
    display: none;
}

[data-object|="unit-aircraft"][data-is-dead] .unit-summary .unit-callsign {
    display: block;
}

.ol-temporary-marker {
    opacity: 0.5;
}