#map-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 280px;
    z-index: 9999;
}

#aircraft-spawn-menu {
    height: fit-content;
}

#ground-unit-spawn-menu {
    height: fit-content;
}

#active-coalition-label {
    border-radius: 999px;
    color: var(--nav-text);
    font-size: 12px;
    font-weight: 600;
    height: fit-content;
    padding: 3px 10px;
    padding-bottom: 3px;
    position: absolute;
    top: -28px;
    width: fit-content;
}

#coalition-switch {
    margin-right: 10px;
    height: 25px;
    width: 50px;
}

#aircraft-spawn-menu .ol-select.is-open .ol-select-options {
    max-height: 300px;
}

#aircraft-spawn-menu>button,
#ground-unit-spawn-menu>button,
#iads-menu>button {
    text-align: center;
    width: 100%;
}

#aircraft-spawn-button {
    background-image: url("/resources/theme/images/buttons/spawn/aircraft.svg");
    background-size: 48px;
}

#ground-ol-contexmenu-button {
    background-image: url("/resources/theme/images/buttons/spawn/ground.svg");
    background-size: 48px;
}

#smoke-spawn-button {
    background-image: url("/resources/theme/images/buttons/spawn/smoke.svg");
    background-size: 48px;
}

#explosion-spawn-button {
    background-image: url("/resources/theme/images/buttons/spawn/explosion.svg");
    background-size: 48px;
}

[data-coalition="blue"]#active-coalition-label,
[data-coalition="blue"].deploy-unit-button,
[data-coalition="blue"]#spawn-airbase-aircraft-button,
[data-coalition="blue"].create-iads-button {
    background-color: var(--primary-blue)
}

[data-coalition="red"]#active-coalition-label,
[data-coalition="red"].deploy-unit-button,
[data-coalition="red"]#spawn-airbase-aircraft-button,
[data-coalition="red"].create-iads-button {
    background-color: var(--primary-red)
}

[data-coalition="neutral"]#active-coalition-label,
[data-coalition="neutral"].deploy-unit-button,
[data-coalition="neutral"]#spawn-airbase-aircraft-button,
[data-coalition="neutral"].create-iads-button {
    background-color: var(--primary-neutral)
}

[data-coalition="blue"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-blue);
    cursor: default;
}

[data-coalition="red"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-red);
    cursor: default;
}

[data-coalition="neutral"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-neutral);
    cursor: default;
}

[data-coalition="blue"]#active-coalition-label::after {
    content: "Create blue unit";
}

[data-coalition="red"]#active-coalition-label::after {
    content: "Create red unit";
}

[data-coalition="neutral"]#active-coalition-label::after {
    content: "Create neutral unit";
}

#loadout-preview {
    align-content: space-between;
    align-items: center;
    column-gap: 20px;
    display: flex;
    flex-direction: row;
    width: 100%;
}

#loadout-list {
    align-content: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#unit-image {
    filter: invert(100%);
    height: 100px;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100px;
}

#smoke-spawn-menu {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#explosion-menu>button,
#smoke-spawn-menu>button {
    align-items: center;
    column-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
}

#smoke-spawn-menu>button::before {
    border-radius: 999px;
    content: "";
    display: block;
    height: 10px;
    width: 10px;
}

[data-smoke-color="red"]::before {
    background-color: red;
}

[data-smoke-color="white"]::before {
    background-color: white;
}

[data-smoke-color="blue"]::before {
    background-color: blue;
}

[data-smoke-color="green"]::before {
    background-color: green;
}

[data-smoke-color="orange"]::before {
    background-color: orange;
}

#aircraft-spawn-menu .ol-slider-value {
	color: var(--accent-light-blue);
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
}

#aircraft-spawn-altitude-slider {
    padding: 0px 10px;
}

/* Unit context menu */
#unit-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 15px;
    position: absolute;
    row-gap: 5px;
    width: fit-content;
    z-index: 9999;
}

#unit-contextmenu button {
    border: 1px solid var(--background-offwhite);
    border-radius: var(--border-radius-sm);
    font-weight: normal;
    padding: 12px;
}

#unit-contextmenu div {
    align-content: center;
    display: flex;
    flex-direction: row;
}

#unit-contextmenu div:before {
    display: inline-block;
    filter: invert(100%);
    height: 16px;
    margin-right: 15px;
    width: 16px;
}

#center-map::before {
    content: url("/resources/theme/images/icons/arrows-to-eye-solid.svg");
}

#refuel::before {
    content: url("/resources/theme/images/icons/fuel.svg");
}

#attack::before {
    content: url("/resources/theme/images/icons/sword.svg");
}

#bomb::before {
    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
}

#carpet-bomb::before {
    content: url("/resources/theme/images/icons/explosion-solid.svg");
}

#fire-at-area::before {
    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
}

#follow::before {
    content: url("/resources/theme/images/icons/follow.svg");
}

#trail::before {
    content: url("/resources/theme/images/icons/trail.svg");
}

#echelon-lh::before {
    content: url("/resources/theme/images/icons/echelon-lh.svg");
}

#echelon-rh::before {
    content: url("/resources/theme/images/icons/echelon-rh.svg");
}

#line-abreast-rh::before,
#line-abreast-lh::before {
    content: url("/resources/theme/images/icons/line-abreast.svg");
}

#front::before {
    content: url("/resources/theme/images/icons/front.svg");
}

#diamond::before {
    content: url("/resources/theme/images/icons/diamond.svg");
}

#custom::before {
    content: url("/resources/theme/images/icons/custom.svg");
}

#custom-formation-dialog {
    width: 250px;
}

#custom-formation-dialog>.ol-dialog-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    margin-top: 10px;
    row-gap: 10px;
}

#custom-formation-dialog>.ol-dialog-content>.ol-group {
    justify-content: space-between;
    width: 100%;
}

#reference-system {
    content: url("/images/reference-system.svg");
    display: inline-block;
    filter: invert(100%);
    position: absolute;
    transform: translate(-50%, -50%);
    width: 50px;
}

.formation-position-clock {
    height: 100px;
    margin: 15px;
    position: relative;
    width: 100px;
}

.formation-position-clock>.clock-hand {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
}

/* Airbase context menu */
#airbase-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 180px;
    z-index: 9999;
}

/* Coalition area context menu */
#coalition-area-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 250px;
    z-index: 9999;
}

#coalition-area-switch {
    margin-right: 10px;
    height: 25px;
    width: 50px;
}

#iads-button {
    background-image: url("/resources/theme/images/buttons/spawn/sam.svg");
    background-size: 48px;
}

#cap-button {
    background-image: url("/resources/theme/images/buttons/spawn/aircraft.svg");
    background-size: 48px;
}

#coalitionarea-back-button {
    background-image: url("/resources/theme/images/buttons/other/back.svg");
    background-size: 48px;
}

#coalitionarea-delete-button {
    background-image: url("/resources/theme/images/buttons/other/delete.svg");
    background-size: 48px;
}

#coalition-area-contextmenu .ol-checkbox {
    align-self: flex-start;
}

#iads-menu .ol-select-options>* {
    padding-top: 8px;
    padding-bottom: 8px;
}

#iads-menu .ol-select-options>*:first-child {
    padding-top: 15px;
}

#iads-menu .ol-select-options>*:last-child {
    padding-bottom: 15px;
}

#iads-menu .ol-select {
    width: 100%;
}

#iads-menu {
    row-gap: 10px;
}
