/* (Page-wide) Re-usable classes
============================================================================= */

/* Tables
----------------------------------------------------------------------------- */

/* Vertically align table content in the middle.
   Useful when some cells have taller content than others, e.g. buttons. */
.table-v-align-middle > thead > tr > th,
.table-v-align-middle > tbody > tr > td {
    vertical-align: middle;
}

/* Attacker- and defender-colored elements
----------------------------------------------------------------------------- */

.bg-attacker {
    background-color: var(--bg-attacker) !important;
}
.bg-attacker-light {
    background-color: var(--bg-attacker-light) !important;
}

.bg-defender {
    background-color: var(--bg-defender) !important;
}
.bg-defender-light {
    background-color: var(--bg-defender-light) !important;
}

.bg-player {
    background-color: var(--bg-player) !important;
}
.bg-player-light {
    background-color: var(--bg-player-light) !important;
}

.bg-battleground {
    background: linear-gradient(90deg, var(--bg-attacker) 40%, var(--bg-defender) 60%) !important;
}

.fg-attacker {
    color: var(--fg-attacker) !important;
}

.fg-defender {
    color: var(--fg-defender) !important;
}

.fg-player {
    color: var(--fg-player) !important;
}

.btn-attacker {
    color: white;
    background-color: var(--bg-attacker);
    border-color: var(--bg-attacker-contrast);
}
.btn-attacker:hover {
    color: white;
    background-color: var(--bg-attacker-dark);
    border-color: var(--bg-attacker-contrast-dark);
}

.btn-defender {
    color: white;
    background-color: var(--bg-defender);
    border-color: var(--bg-defender-contrast);
}
.btn-defender:hover {
    color: white;
    background-color: var(--bg-defender-dark);
    border-color: var(--bg-defender-contrast-dark);
}

.btn-player {
    color: white;
    background-color: var(--bg-player);
    border-color: var(--bg-player-contrast);
}
.btn-player:hover {
    color: white;
    background-color: var(--bg-player-dark);
    border-color: var(--bg-player-contrast-dark);
}

/* Mutant icons
----------------------------------------------------------------------------- */

.mutantCUTImage,
.killMapImage {
    width: 18px;
    height: 18px;
    background-size: contain;
    display: inline-block;
}

.mutantImageAlive {
    background-image: url('../../images/ingameicons/mutant.png');
}
.mutantImageEquiv {
    background-image: url('../../images/ingameicons/mutantEquiv.png');
}

.mutantImageFlagged {
    background-image: url('../../images/ingameicons/mutantFlagged.png');
}

.mutantImageKilled {
    background-image: url('../../images/ingameicons/mutantKilled.png');
}

.mutantImageFlagAction {
    background-image: url('../../images/ingameicons/flag.png');
}

.killMapImageKill {
    background-image: url('../../images/ingameicons/kill.png');
}

.killMapImageNoKill {
    background-image: url('../../images/ingameicons/nokill.png');
}

.killMapImageError {
    background-image: url('../../images/ingameicons/error.png');
}

.killMapImageNoCoverage {
    background-image: url('../../images/ingameicons/nocoverage.png');
}

.killMapImageUnknown {
    background-image: url('../../images/ingameicons/unknown.png');
}

/* Terminal-like text style for command-line output <pre>s
----------------------------------------------------------------------------- */

.terminal-pre {
    background: #000;
    color: #c4c4c4;
    white-space: pre;
    overflow-x: auto;
    font-size: 12px;
    border-radius: 0;
    border: 0;
    padding: 8px;
}

/* Form width
----------------------------------------------------------------------------- */

.form-width {
    max-width: 50rem;
}

/* Remove margin and padding from forms by default.
----------------------------------------------------------------------------- */

form {
    padding: 0;
    margin: 0;
}