/* TODO: Maybe multiple stylesheets is a good idea? Check out ITCSS and segment them by their layer */

@use "styles/lancer-app-v2";
@use "styles/settings/lancer-initiative-config";
@use "styles/combat/lancer-combat-tracker";

/* Item/document types, useful for shorthand */
$item-types: core_bonus environment faction frame manufacturer npc_class npc_template npc_feature weapon_mod mech_system
  mech_weapon organization pilot_armor pilot_gear pilot_weapon reserve sitrep skill status tag talent quirk;
$actor-types: npc pilot mech deployable;
$document-types: join($item-types, $actor-types);

/* Settings Layer*/
:root {
  --main-font-family: Helvetica, Arial, sans-serif;
  --monospace-font-family: Consolas, "Courier New", Courier, monaco, monospace;

  /* Sheet theme vars */
  --primary-color: #991e2a;
  --primary-highlight: color-mix(in srgb, var(--primary-color), #fff 55%);
  --color-shadow-primary: #991e2a;
  --light-text: #efefef;
  --dark-text: #000000;
  --background-color: #ededed;
  --secondary-color: #9e541f;
  --secondary-highlight: color-mix(in srgb, var(--secondary-color), #fff 55%);
  --secondary-text: #ffffff;
  --dark-gray-color: #4d4d4d;
  --light-gray-color: #919a9b;
  --tooltip-background: #ffffff;
  --tooltip-text: #000000;
  --ref-color: color-mix(in srgb, var(--primary-color), #fff 90%);

  /* Manufacturer theme vars */
  --gms-color: #991e2a;
  --ips-n-color: #1662b8;
  --ssc-color: #d1920a;
  --horus-color: #00a256;
  --ha-color: #6e4373;

  /* Gear and type color vars */
  --system-color: #58b434;
  --weapon-color: #111111;
  --trait-color: #0a7674;
  --mod-color: var(--trait-color);
  --bonus-color: #5d8673;
  --bonus-list-color: #71a373;
  --tech-color: #7d2477;
  --talent-color: #3a81c3;
  --pilot-stat-color: color-mix(in srgb, var(--background-color), #888 50%);

  /* Action color vars */
  --reaction-color: #892eb1;
  --protocol-color: #c75a00;
  --quick-color: #3949ab;
  --quick-tech-color: #3949ab; // TODO is this needed?
  --invade-color: #222222;
  --full-color: #283593;
  --full-tech-color: #283593; // TODO is this needed?
  --free-color: #00695c;
  --move-color: #cc0a0a;

  /* Hit type color vars */
  --crit-color: #9c5e35;
  --hit-color: #337494;
  --miss-color: #3c3c3c;
  --error-color: #b4800e;

  /* Accurate / difficult color vars */
  --accurate-color: #0d689c;
  --difficult-color: #9c0d0d;

  /* Darkens tone by a small increment. For some themes should probably lighten instead, somehow? */
  --darken-color: 0, 0, 0;
  --darken-1: rgba(var(--darken-color), 0.1);
  --darken-2: rgba(var(--darken-color), 0.2);
  --darken-3: rgba(var(--darken-color), 0.3);
  --darken-4: rgba(var(--darken-color), 0.4);
  --darken-5: rgba(var(--darken-color), 0.5);

  /* Darkens tone by a small increment. For some themes should probably lighten instead, somehow? */
  --lighten-color: 255, 255, 255;
  --lighten-1: rgba(var(--lighten-color), 0.1);
  --lighten-2: rgba(var(--lighten-color), 0.2);
  --lighten-3: rgba(var(--lighten-color), 0.3);
  --lighten-4: rgba(var(--lighten-color), 0.4);
  --lighten-5: rgba(var(--lighten-color), 0.5);

  /* box-shadow values for hover glow and buttons */
  --hover-bright: inset 0 0 0 10em rgba(255, 255, 255, 0.15);
  --button-shadow: 1px 1px 1px 0.6px var(--darken-5);

  /* Clip paths */
  $clip_in: 10px;
  --top-dogear-path: polygon(#{$clip_in} 0, 100% 0, 100% 100%, 0 100%, 0 #{$clip_in});
  --bottom-dogear-path: polygon(0 0, 100% 0, 100% calc(100% - #{$clip_in}), calc(100% - #{$clip_in}) 100%, 0 100%);
  --double-dogear-path: polygon(
    #{$clip_in} 0,
    100% 0,
    100% calc(100% - #{$clip_in}),
    calc(100% - #{$clip_in}) 100%,
    0 100%,
    0 #{$clip_in}
  );

  --reaction-clip-path: polygon(
    0 0,
    100% 0,
    100% 1px,
    calc(100% - 9px) 1px,
    calc(100% - 8px) 2px,
    100% 2px,
    100% 3px,
    calc(100% - 7px) 3px,
    calc(100% - 6px) 4px,
    100% 4px,
    100% 5px,
    calc(100% - 5px) 5px,
    calc(100% - 4px) 6px,
    100% 6px,
    100% 7px,
    calc(100% - 3px) 7px,
    calc(100% - 2px) 8px,
    100% 8px,
    100% 100%,
    0 100%
  );
  --tech-clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    calc(100% - 12px) 7px,
    calc(100% - 7px) 7px,
    calc(100% - 7px) 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 0,
    100% 0,
    100% 3px,
    calc(100% - 3px) 3px,
    calc(100% - 3px) 7px,
    calc(100% - 7px) 7px,
    calc(100% - 7px) 12px,
    100% 12px,
    100% 100%,
    0 100%
  );
}

code {
  padding: 0px 5px !important;
  background-color: var(--darken-1);
  border-radius: 5px;
}

.app header.window-header {
  /* Set UI icons to white when located in headers and over the dark colour scheme */
  color: white;
}

.window-app .window-content,
#chat-controls div.roll-type-select select,
#chat-form textarea,
button,
.sheet.journal-entry .journal-entry-content {
  background: #e1e1e1; /* Set default backgrounds to a futuristic gundam light grey */
  font-family: var(--main-font-family);
}

.window-app.lancer .window-content {
  background-color: var(--background-color);
  color: var(--dark-text);
}
/* ---------- */

/* Elements Layer */

/* General-purpose theme color classes */
/* prettier-ignore */
$theme-types: "primary" "secondary" "dark-gray" "light-gray" "tooltip"    // General themes
  "gms" "ips-n" "ssc" "horus" "ha"                       // Manufacturers
  "trait" "mod" "bonus" "system" "tech" "talent" "weapon"     // Gear types
  "reaction" "protocol" "quick" "full" "move" "free"; // Action types
@each $theme-type in $theme-types {
  /* Headers, buttons, and chips */
  a.action.lancer-#{$theme-type},
  .lancer-header.lancer-#{$theme-type},
  .lancer-#{$theme-type} .lancer-header,
  button.lancer-#{$theme-type},
  .lancer-button.lancer-#{$theme-type},
  .lancer-chip.lancer-#{$theme-type} {
    background-color: var(--#{$theme-type}-color, fuschia);
    color: var(--light-text, fuschia);
  }

  /* Text */
  .lancer-#{$theme-type}-text {
    color: var(--#{$theme-type}-color, fuschia);
  }

  /* Border */
  .lancer-border-#{$theme-type} {
    border-color: var(--#{$theme-type}-color, fuschia);

    &.card {
      border-width: 2px;
      border-style: solid;
    }
  }

  /* Foundry adds a bottom border to header elements. That's fine, but make it match. */
  h1.lancer-#{$theme-type},
  h2.lancer-#{$theme-type},
  h3.lancer-#{$theme-type},
  h4.lancer-#{$theme-type} {
    border-color: var(--#{$theme-type}-color, fuschia);
  }
}
/* Highlights */
.lancer-primary.highlight {
  background-color: var(--primary-highlight, fuchsia);
  color: var(--light-text, fuchsia);
}
.lancer-secondary.highlight {
  background-color: var(--secondary-highlight, fuchsia);
  color: var(--light-text, fuchsia);
}

/* Default font for sheets and chat messages. */
.lancer.sheet .window-content,
#chat-log .message,
.chat-popout .message {
  /* An exception for each icon font */
  font-family: var(--main-font-family);
}

#chat-log .message-content {
  padding: 5px !important;

  & .strikethrough {
    text-decoration: line-through;
    opacity: 0.5;
  }
}

/* Default text and background color for sheets */
.lancer.sheet .window-content {
  color: var(--dark-text);
  background: var(--background-color);
}

.lancer-sheet,
.lancer.app {
  &.editable {
    height: 100%;
  }

  & input[type="text"],
  & input[type="number"],
  & input[type="password"],
  & input[type="date"],
  & input[type="time"],
  & input[type="search"] {
    color: var(--dark-text);
  }

  & select {
    background-color: var(--tooltip-background);
    color: var(--dark-text);
    & option {
      background-color: var(--tooltip-background);
      color: var(--tooltip-text);
    }
  }

  &.bond input.lancer-text-field {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
  }
}

.lancer.sheet select {
  width: min-content;
}

.lancer.sheet .mount-header select {
  color: var(--light-text);
  outline: 0;
  border: none;
}

.lancer.sheet .mount-header select option {
  background-color: var(--primary-color, fuchsia);
  color: var(--light-text);
}

.scroll-body {
  overflow-y: auto;
  margin-top: 8px;
  height: calc(100% - 168px);
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-center > * {
  flex-grow: unset;
}

/* For if you just want a single item left */
.self-left {
  align-self: flex-start;
}

/* ---------- */

/* Components Layer */
.lancer.sheet header:not(.window-header) {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--primary-color, fuchsia);
  margin: 10px;
  color: var(--light-text);

  &.inactive-mech {
    background-color: var(--secondary-color, fuchsia);
    color: var(--secondary-text);
  }
}

.lancer.sheet header .details {
  display: flex;
  /* flex-direction: column; */
  font-size: 14px;
  padding: 10px;
  align-items: flex-start;
}

.header-icon {
  display: flex;
  float: left;
}

.pilot-callsign {
  font-size: 34px;
  font-weight: bold;
}
/* ---------- */

/* Chat Styles */

#chat-log,
.chat-popout {
  & .message {
    background: rgba(237, 237, 237);
    border-radius: 20px 5px;
    padding: 0;
    // overflow: hidden;
  }

  & .message-header {
    overflow: hidden;
    border-radius: 17px 1px 0 0;
    background-color: var(--primary-color, fuchsia);
    padding: 5px 10px;
  }

  & .message-header * {
    color: var(--light-text);
  }

  & .message-content {
    padding: 5px 10px;
  }

  & .message.whisper {
    border: 2px solid #fdcb28;
  }
}

.mini-weapon-profile {
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid var(--weapon-color);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: color-mix(in srgb, var(--weapon-color), #fff 85%);
  font-size: 15px;
  word-break: normal;

  .message-content & {
    margin-bottom: 0.2em;
  }

  .lancer-tech + & {
    border-color: var(--tech-color);
    background-color: color-mix(in srgb, var(--tech-color), #fff 85%);
  }

  .mini-weapon-profile-separator {
    color: var(--light-gray-color);
    width: min-content;
    max-width: min-content;
  }

  .mini-weapon-profile-accuracy,
  .mini-weapon-profile-range,
  .mini-weapon-profile-damage {
    justify-content: center;

    span {
      max-width: min-content;
      display: flex;
      align-items: center;

      & + span {
        padding-left: 0.3em;
      }
    }
  }
}

.lancer-hit {
  display: inline-flex;
  margin: 8px;
  justify-content: space-between;
  align-items: center;
}

.card.lancer-hit-chip {
  float: right;
  width: 100%;
  margin: 3px 0;
  color: var(--light-text);
  background-color: var(--miss-color);

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

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

.lancer-hit-thumb {
  width: 50px;
  min-width: 50px;
  margin-right: 4px;
  margin-top: 2px;
  border: 2px solid var(--dark-gray-color);
  border-radius: 5px;
  border-right: none;
  border-left: none;
}

.lancer-hit-text {
  display: inline-grid;
  text-align: start;
  width: 80%;
}

.lancer-hit-text-name {
  font-size: 1.1em;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.lancer-hit-target {
  margin: 0.1em 0;
  display: grid;
  grid-template-areas:
    "img name hit"
    "img roll roll";
  grid-template-columns: 55px 2fr 1fr;
  align-items: center;

  .lancer-hit-thumb {
    grid-area: img;
    margin: 0;
  }

  .lancer-hit-text-name {
    grid-area: name;
  }

  .lancer-hit-chip {
    grid-area: hit;
  }

  .lancer-hit-roll {
    grid-area: roll;
    & i.fas {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }

  &:has(+ .lancer-hit-target) {
    .lancer-hit-roll {
      border-bottom: 1px dashed var(--dark-gray-color);
    }
  }
}

.lancer-damage-flow {
  margin: 0 0.5em 0.25em 0.5em;
  width: calc(100% - 1em);

  i {
    margin-right: 0.25em;
  }
}

.lancer-damage-tag {
  padding: 0.1em 0.5em;
  background-color: var(--primary-color);
  color: var(--light-text);
  border-radius: 0.5em;
  font-size: 0.8em;
  display: flex;
  align-content: center;
  align-items: center;
  text-wrap: nowrap;
}
.lancer-damage-targets {
  margin: 0px 0.25em;

  .lancer-damage-target {
    margin: 0.3em 0;
    display: grid;
    grid-template-areas:
      "img name button"
      "img tags tags";
    grid-template-columns: 55px auto min-content;
    align-items: center;

    .lancer-hit-thumb {
      grid-area: img;
      margin: 0;
    }

    .lancer-hit-text-name {
      grid-area: name;
      text-align: left;
      height: 100%;
      align-content: center;
    }

    .lancer-damage-totals {
      grid-area: totals;
    }

    .lancer-damage-button-group {
      grid-area: button;
    }

    .lancer-damage-rolls-tags {
      grid-area: tags;
      min-height: 1.3em;
      padding: 0.1em;

      .lancer-target-bonus-damage:not(:has(*)) {
        display: none;

        & ~ .lancer-damage-tags {
          flex-grow: 1 !important;
        }
      }
    }

    .lancer-damage-tags {
      display: flex;
      flex-wrap: wrap;
      justify-self: flex-end;
      justify-content: flex-end;
      align-items: center;
      flex-grow: 0;
    }

    &:has(+ .lancer-damage-target) {
      .lancer-damage-rolls-tags {
        border-bottom: 1px dashed var(--dark-gray-color);
      }
    }

    // Add a small margin below the last target if there's another
    // header following
    &:has(+ .lancer-mini-header) {
      margin-bottom: 4px;
    }
  }
}

.card.lancer-charge-chip {
  color: var(--light-text);
  background-color: var(--dark-gray-color);
}
.card.lancer-charge-chip.charged {
  color: var(--light-text);
  background-color: var(--hit-color);
}

/* ---------- */

.vsep {
  border: none;
  border-left: 1px solid var(--secondary-color, black);
  border-right: 1px solid var(--secondary-color, black);
  min-width: 3px;
  max-width: 3px;
  margin-left: 6px;
  margin-right: 6px;
}

.hsep {
  border: none;
  border-top: 1px solid var(--secondary-color, black);
  max-height: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
  width: 95%;
}

.add-button {
  width: 20px;
  height: 20px;
  background: #d7b6b9;
  text-align: center;
  border: solid var(--primary-color, fuchsia);
  border-width: 1px;
  border-radius: 4px;
  font-weight: bold;
  color: var(--primary-color, fuchsia);
}

.remove-button {
  width: 20px;
  height: 20px;
  background: #bebebe;
  border: solid #3e3e3e;
  border-width: 1px;
  border-radius: 4px;
  text-align: center;
  color: #8e8e8e;
  padding-top: 2px;
}

.tags-container > div {
  flex-grow: 0;
}

.tag-label {
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.simple-button {
  color: var(--light-text);
  background-color: var(--primary-color, fuchsia);
  max-width: max-content;
  min-width: max-content;
  align-items: center;
  border-radius: 5px;
  padding: 0px 5px;
  margin: 3px 5px;
  border: 2px;
  font-size: 12px;
}

.compact-tag {
  color: var(--light-text);
  background-color: var(--primary-color, fuchsia);
  max-height: 20px;
  align-items: center;
  align-content: center;
  border-radius: 5px;
  padding: 0px 5px;
  margin: 3px 5px;
  font-size: 12px;
}

.compact-tag-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
  margin: 3px;
  min-height: 1em;
}

.large-tag {
  color: var(--dark-text, fuchsia);
  align-items: center;
  border: 1px solid var(--primary-color, fuchsia);
  border-radius: 5px;
  margin: 3px 5px;
  font-size: 1.1em;

  .tag-header {
    color: var(--light-text, fuchsia);
    background-color: var(--primary-color, fuchsia);
    text-align: left;

    .tag-controls {
      max-width: fit-content;
      align-content: center;

      a {
        padding-right: 0.3em;
      }
    }
  }

  .tag-description {
    margin: 0.2em 0.5em;
    text-align: left;
    font-size: 0.9em;
    max-height: 14.15em;
    overflow-y: scroll;
  }
}

.large-tag-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  margin: 3px;
  min-height: 1em;
}

.license-desc {
  display: flex;
}

.license-desc > input::-webkit-outer-spin-button,
.license-desc > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.license-desc > input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  width: 3ch;
}

.license-desc > input,
.license-desc > span {
  background: transparent;
  border: none;
  color: #828282;
  width: 12ch;
}

.license-desc > span {
  font-size: 13px;
  margin-top: 2px;
  width: 3ch;
}

.lancer-license {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.edit-license-wrapper {
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  margin: 0.5em;
  padding: 0 0.25em;
  width: min-content;
  max-width: min-content;
  flex-wrap: unset;
  align-self: center;
  gap: 1em;

  .rank-wrapper {
    align-items: center;
    justify-content: center;
    flex-wrap: unset;

    & span {
      margin-right: 0.5em;
      font-size: 1.2em;
      flex-grow: unset;
    }

    & input {
      max-width: 2em;
    }
  }
}

.labeled-input {
  flex-grow: unset;
}

.labeled-input > span {
  text-align: center;
  color: var(--light-text);
  background-color: var(--primary-color, fuchsia);
  max-height: 1.5em;
}

.lancer .lancer-invisible-input {
  background: transparent;
  border: none;
  color: inherit;
  text-align: center;
}

ul.items-list {
  padding: 0;
}

.small-icon {
  flex-grow: 0;
  min-width: 1em;
  max-height: 1em;
}

.med-icon {
  flex-grow: 0;
  max-width: 2.5em;
  max-height: 2.5em;
}

.large-icon {
  flex-grow: 0;
  min-width: 5em;
  max-height: 5em;
}

@mixin icon-size($pixels) {
  font-size: $pixels;
  min-width: $pixels;
  max-width: $pixels;
  min-height: $pixels;
  max-height: $pixels;
}

@mixin vert-mid() {
  vertical-align: middle;
}

.i--click {
  cursor: pointer;
}

.i--xs {
  @include icon-size(15px);
  @include vert-mid();
}

.i--s {
  @include icon-size(20px);
  @include vert-mid();
}

.i--sm {
  @include icon-size(25px);
  @include vert-mid();
}

.i--m {
  @include icon-size(30px);
  @include vert-mid();
}

.i--l {
  @include icon-size(40px);
  @include vert-mid();
}

.i--xl {
  @include icon-size(60px);
  @include vert-mid();
}

.size-icon,
.tier-icon {
  @include icon-size(120px);
  @include vert-mid();
}

.profile-img {
  @include icon-size(100px);
  object-fit: cover;
}

.faded {
  opacity: 75%;
}

.i--dark {
  color: var(--dark-text);
}

.i--light {
  color: var(--light-text);
}

.damage--kinetic {
  color: #616161;
}

.damage--energy {
  color: #2195ca;
}

.damage--explosive {
  color: #fca017;
}

.damage--burn {
  color: #ce871e;
}

.damage--heat {
  color: #e74210;
}

.damage--variable {
  color: #d500f9;
}

.clipped {
  clip-path: var(--double-dogear-path);
  -webkit-clip-path: var(--double-dogear-path);
}

.clipped-top {
  clip-path: var(--top-dogear-path);
  -webkit-clip-path: var(--top-dogear-path);
}

.clipped-bot {
  clip-path: var(--bottom-dogear-path);
  -webkit-clip-path: var(--bottom-dogear-path);
}

.lcp-importer {
  display: grid;
  grid-template: 1fr / 1fr 1fr;
}

.lcp-up {
  margin: 10px;
  align-self: center;
}

.lcp-core-update,
.lcp-import,
.lcp-clear-all {
  margin: 10px;
  width: auto;
}

.lcp-manifest-badge {
  background: var(--primary-color);
  color: var(--light-text);
  padding: 0em 0.5em;
  border-radius: 1em;
}

table.lcp-index {
  margin: 10px;
  width: auto;
}

th.lcp-index,
td.lcp-index {
  text-align: left;
  padding: 0em 1em;
  font-size: 16px;
  height: 2em;
}

tr.lcp-index-header {
  height: 2em;
  background-color: var(--darken-1);
}

.lancer-tabs {
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  background-color: var(--primary-color, fuchsia);
  color: var(--light-text);
  padding: 3px 10px;
  min-height: max-content;
  align-items: center;
}

.lancer-tab {
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  -webkit-clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding: 10px;
  transition: all 0.25s ease-in;

  &:hover {
    background-color: var(--darken-2);
  }

  &.active {
    color: var(--light-text, fuchsia);
    background-color: var(--primary-highlight, fuchsia);
  }
}

.tier-control {
  min-width: 100%;
  background-color: #991e2a;
  color: var(--light-text);
}

.tier-control option {
  background-color: #991e2a;
  color: var(--light-text);
}

/* Used on some item cards to add a border and consistent spacing.
 * Should be used on an inner div of a card.
 */
.lancer-body {
  min-height: 15px;
  padding: 3px;
  flex: 1 0;

  text-align: left;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;

  hyphens: auto;
  word-break: break-word;

  border-width: 2px;
  border-style: solid;
  border-top-style: none;

  background-color: var(--darken-1);

  .core-active-wrapper > &,
  .core-passive-wrapper > & {
    padding-top: 0;
    margin-top: 0;
  }

  @each $theme-type in $theme-types {
    .lancer-#{$theme-type} > &,
    .lancer-#{$theme-type} ~ & {
      border-color: var(--#{$theme-type}-color);
    }
  }

  .mount > & {
    min-height: 45px;
  }
}

.pilot-gear-body {
  padding: 0 0.5em 0 0.5em;
}

.compact-range,
.compact-acc,
.compact-damage {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 5px 0;
  max-width: min-content;
  min-width: fit-content;

  & > & {
    margin: 0 5px;
  }

  &.lancer-button {
    padding-left: 0;
    padding-right: 0.5em;
  }
}

/* Put on any ref or reffable location */
/*.ref {

}*/

/* Put specifically on the rectangular card style of ref */
.ref-card {
  border: 2px solid black;
  margin: 3px;
  display: flex;
  align-items: center;
  text-align: center;
  max-height: 40px;

  & .span {
    padding-left: 5px;
  }
}

.set.ref.ref-card {
  background-color: var(--ref-color);
  color: black;
}

.click-open {
  cursor: pointer;

  &:hover {
    text-shadow: 0 0 8px var(--color-shadow-primary);
  }
}

.ref-icon {
  width: 35px;
  height: 35px;
  margin: 0px;
  flex-grow: 0;
}

.ref-card .ref-icon {
  border-width: 0;
  border-right-width: 2px;
}

/* Control box in the right side of a ref card. Delete button, etc */
.ref-controls {
  margin: 5px;
  margin-left: auto;
  max-width: 40px;
}

/* Re-allow clicking in these damn things */
.lancer input,
.lancer .input,
.lancer textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;

  /* Also make them not insist on being so obnoxiously large */
  min-width: 30px;

  color: var(--dark-text);
}

/* Some text area sizes */
.lancer textarea {
  min-height: 200px;
}

.pilot-stats {
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
  background-color: var(--pilot-stat-color);
  padding-left: 5px;
  padding-right: 5px;
  align-items: flex-start;

  .lancer-stat.minor {
    color: var(--dark-text);
  }
}

.compact-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 5px;
  i {
    display: flex;
  }
}

/** Fixes CSS priority on flexrows within cards */
.card.flexrow {
  flex-direction: row;
}

.compact-frame,
.compact-class,
.compact-template,
.compact-deployer {
  grid-area: 1/1/1/3;
  align-items: center;
  height: 8em;
  max-height: 8em;
  background-color: var(--primary-color);

  .img-bar {
    background-repeat: no-repeat;
    background-size: 200px;
    height: 100%;
    min-width: 50%;
  }
}
.compact-template {
  height: 100%;
}
.compact-frame > .img-bar,
.compact-class > .img-bar {
  background-position: left 50% top 40%;
}
.compact-template > .img-bar {
  background-position: left 50% top 60%;
  background-size: 35%;
}
.compact-deployer > .img-bar {
  background-position: left 50% top 10%;
}

.compact-frame:hover,
.compact-class:hover,
.compact-deployer:hover {
  box-shadow: var(--hover-bright);
}

/* Consolidate all of our card header stuff stuff */
.lancer-header {
  flex: 0 0 2em;

  /* Generally uglier, inconsistent. Use when header needs other stuff in it, like with talents large icons etc */
  &.stretch {
    flex: 0 0 100%;
  }

  text-overflow: ellipsis;
  font-weight: normal;
  text-transform: uppercase;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-self: stretch;

  /* For buttons/icons, we want them to not grow but also not just get squashed into nothing 
  * If this unbalances things, add an equal # of balancers to the other side
  */
  a,
  :not(a) i,
  img {
    flex: 0 0 auto;
    padding-left: 5px;
    padding-right: 5px;
  }

  div.balancer {
    flex: 0 0 auto;
    padding-left: 5px;
    padding-right: 5px;
  }

  /* Spans are the main bodies of headers. We want them to grow! 
  * Inputs too for those cases where the title is editable.
  */
  span,
  input {
    flex-grow: 1;
    text-align: center;
    font-size: inherit;
    margin: 0 4px;
  }

  /* Sometimes want left align, using the "left" class */
  span.left,
  input.left {
    text-align: left;
    margin-left: 10px;
  }

  /* If we or our parent item is clipped, make sure we don't clip our contents */
  .clipped > &,
  .clipped-top > &,
  &.clipped,
  &.clipped-top {
    padding-left: 10px;
    padding-right: 10px;
  }

  // Legacy styling for old chat messages
  #chat-log .bonus-list & {
    background-color: var(--bonus-list-color, fuchsia);
  }

  // Legacy styling for old chat messages
  #chat-log .bonus & {
    background-color: var(--bonus-color, fuchsia);
  }

  // Legacy styling for old chat messages
  #chat-log .mech-system &,
  #chat-log .npc-system &,
  #chat-log &.mech-system,
  #chat-log &.npc-system {
    background-color: var(--system-color);
    color: var(--light-text);
  }

  // Legacy styling for old chat messages
  #chat-log .mech_weapon &,
  #chat-log .pilot_weapon &,
  #chat-log &.mech_weapon,
  #chat-log &.pilot_weapon {
    background-color: var(--weapon-color);
    color: var(--light-text);
  }

  &.struct-stress {
    // legacy coloring for old chat messages
    #chat-log & {
      background-color: var(--primary-color);
    }
    color: var(--light-text);
    padding-top: 1px;
    display: flex;
    flex-direction: row;

    span.spacer {
      flex: 0 0;
    }
    a {
      flex: 0 0;
    }
  }

  .mech_weapon:hover &,
  .weapon_mod:hover &,
  .npc-weapon:hover &,
  .pilot_weapon:hover &,
  .mech-system:hover &,
  .mech-system-compact:hover &,
  .npc-trait:hover &,
  .npc-system:hover &,
  .npc-tech:hover &,
  .npc-reaction:hover &,
  .pilot_gear:hover &,
  .pilot_armor:hover &,
  .reserve:hover & {
    box-shadow: var(--hover-bright);
  }

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

  /* Destroyed gear */
  &.destroyed {
    background-color: var(--weapon-color);

    span {
      text-decoration: line-through;
      color: #fb3535;
    }

    .cci {
      color: #ff6a23;
    }
    .mdi {
      color: #ff6a23;
      margin-bottom: -2px;
    }
    .mdi-cog {
      font-size: 28px;
    }
  }

  /* General font sizing options */
  &.major {
    font-size: 18px;
    font-weight: bolder;
  }

  &.submajor {
    font-size: 15px;
    font-weight: bold;
  }

  &.minor {
    font-size: 12px;
    font-weight: lighter;
  }

  & span.minor {
    margin: 0 16px;
  }

  .activation-chip {
    overflow: unset;
    margin-left: 0.1em;
    padding: 0 0.5em 0 0.5em;
    align-self: center;
  }
}

.lancer-mini-header {
  align-items: center;
  color: var(--light-text) !important;
  background-color: var(--primary-color, fuchsia);
  max-height: fit-content;
}

.hex {
  cursor: pointer;
  font-size: 1.6em;
}
.hex-filled {
  color: rgb(173, 6, 22);
}
.hex-white {
  color: var(--light-text);
}

.clipped.card.charged-box {
  width: fit-content;
  display: inline-flex;
  flex-direction: row;
  padding: 4px 8px;
  justify-content: space-between;
  align-items: center;
  color: var(--light-text);
  background-color: var(--primary-color, fuchsia);
  flex-grow: unset;
  min-width: 9em;
  max-height: 3em;
}

.big-editor {
  background-color: #dbdbdb;
  min-height: 15em;
  text-align: left;
}

.lancer-stat {
  margin: 0em 0.2em;
}

.effect-stat,
input[type="number"].lancer-stat {
  align-self: center;
  text-align: center;
  max-width: 40px;
  min-width: 25px;
}

.lancer-text-field,
input[type="text"].lancer-input {
  align-self: center;
  text-align: left;
  width: calc(100% - 20px);
  margin: 5px;
}

.size-icon {
  color: var(--primary-color, fuchsia);
}
.tier-icon {
  color: var(--light-text);
}

.header-name {
  align-self: center;
  //height: -webkit-fill-available;
}

.header-field,
.header-fields > * {
  color: var(--light-text) !important;
}

.lancer.sheet,
.lancer-sheet {
  .editor,
  .editor-content {
    height: -webkit-fill-available;
    min-height: 30em;
  }
}

.card {
  background-color: var(--darken-1);
  margin: 3px 10px;
  text-align: center;
  padding-bottom: 1px;
  display: flex;
  flex-direction: column;

  &.nested {
    margin: 0;
  }
}

.card .editor-content {
  text-align: left;
}

.collapse-icon {
  margin: 4px;
}
.collapse-trigger {
  cursor: pointer;
}
.collapse {
  max-height: 1000em;
  opacity: 1;
  overflow: unset;
  transition: max-height 0.5s, opacity 0.2s, padding 0.5s ease-in;
}
.collapse.collapsed {
  max-height: 0;
  min-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
}

.bond-xp-item {
  text-align: left;
  padding: 0.2em 1em;
}

.bond-ideal-select,
.bond-question-select {
  width: 100% !important;
  flex-grow: 1;
  text-wrap: wrap; // Firefox doesn't seem to have an equivalent, unfortunately
}

.bond-question-item {
  padding: 0.5em 1em 0.5em 1em;

  .bond-question-question {
    width: 100%;
    text-align: left;
    font-weight: bold;
  }
}

.monospace {
  font-family: var(--monospace-font-family);
}

.desc-text {
  text-align: left;
  padding: 0.5em;
  font-family: var(--monospace-font-family);

  border: 1px solid #999;
  border-radius: 5px;
  margin: 5px;
  background: var(--darken-1);

  & > p {
    margin: 0;

    &:has(+ p) {
      margin-bottom: 0.5em;
    }
  }
}

.effect-box {
  text-align: left;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-radius: 8px;
  border-color: var(--secondary-color);
  border-style: solid;
  margin-top: 10px;
}

.effect-title {
  text-transform: uppercase;
  letter-spacing: 0.13em !important;
  font-weight: 530;
  position: relative;
  top: -8px;
  left: 8px;
  background: var(--primary-color);
  color: var(--light-text);
  //border-radius: 5px;
  padding-left: 5px;
  padding-right: 12px;
}

.effect-text {
  text-align: left;
  padding: 0.5em;
  width: 100%;
  & > p {
    margin: 0;
  }
}

/* Start of HORUS glitchy styles used in lancer-data */
code {
  padding: 4px 12px 4px 12px;
  font-family: var(--monospace-font-family);
}

code.horus {
  font-size: 1.1em;
  background-color: var(--darken-5) !important;
  box-shadow: none;
  //color: var(--main-theme-text);
  font-style: normal;
  letter-spacing: 0.05em;
  border-radius: 0;
}

code.horus:hover {
  background-color: black !important;
  animation: distort 0.6s infinite;
  text-transform: uppercase;
  font-weight: bold;
}

@keyframes distort {
  0% {
    text-shadow: 2px 1px #ff00ff, -2px -3px #00ffff;
    transform: translate(-1px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: crosshair;
  }
  25% {
    text-shadow: -2px -3px #ff00ff, 2px 1px #00ffff;
    transform: translate(2px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: cell;
  }
  50% {
    text-shadow: 2px -1px #ff00ff, -4px 1px #00ffff;
    transform: translate(-2px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: col-resize;
  }
  75% {
    text-shadow: -4px -1px #ff00ff, -2px -1px #00ffff;
    transform: translate(3px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: move;
  }
  100% {
    text-shadow: -2px 0 #ff00ff, 2px -1px #00ffff;
    transform: translate(-2px, 0) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: all-scroll;
  }
}

.horus--subtle {
  animation: distort-subtle 5s infinite;
}

@keyframes distort-subtle {
  25% {
    text-shadow: none;
  }
  26% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  27% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  28% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  29% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  30% {
    text-shadow: none;
  }
  75% {
    text-shadow: none;
  }
  76% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  77% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  78% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  79% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  80% {
    text-shadow: none;
  }
}

.horus--very--subtle {
  animation: distort-very-subtle 5s infinite;
}

@keyframes distort-very-subtle {
  25% {
    text-shadow: none;
  }
  26% {
    text-shadow: 1px -1px rgba(255, 0, 0, 0.5), -1px 2px rgba(0, 255, 255, 0.5);
  }
  27% {
    text-shadow: -1px -2px rgba(255, 0, 0, 0.5), 1px 1px rgba(0, 255, 255, 0.5);
  }
  28% {
    text-shadow: 1px 1px rgba(255, 0, 0, 0.5), -2px 1px rgba(0, 255, 255, 0.5);
  }
  29% {
    text-shadow: -2px 1px rgba(255, 0, 0, 0.5), -1px -1px rgba(0, 255, 255, 0.5);
  }
  30% {
    text-shadow: none;
  }
  75% {
    text-shadow: none;
  }
  76% {
    text-shadow: -2px 1px rgba(255, 0, 0, 0.5), -1px -1px rgba(0, 255, 255, 0.5);
  }
  77% {
    text-shadow: -1px -2px rgba(255, 0, 0, 0.5), 1px 1px rgba(0, 255, 255, 0.5);
  }
  78% {
    text-shadow: 1px -1px rgba(255, 0, 0, 0.5), -1px 2px rgba(0, 255, 255, 0.5);
  }
  79% {
    text-shadow: 1px 1px rgba(255, 0, 0, 0.5), -2px 1px rgba(0, 255, 255, 0.5);
  }
  80% {
    text-shadow: none;
  }
}

/* End of HORUS glitchy styles used in lancer-data */

.roll-attack,
.roll-damage,
.roll-trigger,
.system-macro,
.gear-macro,
.cb-macro,
.item-macro,
.core-passive-macro,
.core-active-macro {
  margin: 5px 10px;
}

.roll-attack,
.roll-tech,
.system-macro {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  margin: 3px 10px;
  min-width: 3em;
  height: 3em;
  border: 1px solid var(--darken-2);
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0.6px #000000b3;
}

.system-macro {
  max-width: min-content;
}

.lancer-dice-roll {
  padding-left: 3px;
  padding-right: 3px;
}

.lancer-dice-formula,
.lancer-dice-total {
  margin: 5px;
  align-items: center;
  text-align: center;
  background: var(--darken-1);
  border: 1px solid #999;
  border-radius: 3px;
  box-shadow: 0 0 2px #fff inset;
}

.lancer-dice-total {
  margin: 5px;
  min-width: max-content;
  padding: 0px 5px;
}

.arrow-input-container {
  align-self: center;
  max-width: fit-content;
  flex-wrap: nowrap;
  margin: auto;
}

.clicker-plus-button {
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 20% 50%, 0% 0%);
}

.clicker-minus-button {
  clip-path: polygon(100% 0%, 80% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

/* Several of these styles require !important to override the standard button styling */
.clicker-minus-button,
.clicker-plus-button {
  cursor: pointer;
  width: 30px;
  min-width: 30px;
  height: 30px;
  font-weight: bold;
  background-color: var(--secondary-color) !important;
  color: var(--secondary-text) !important;
  /* The box shadow and border styling for buttons looks bad with the clip path */
  box-shadow: none !important;
  border: none !important;
  /* Don't ask me why, but this aligns it vertically nicely */
  line-height: 1px;

  &:hover {
    box-shadow: var(--hover-bright) !important;
  }
}

input[type="number"] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.core-power-toggle {
  display: block;
  width: 30px;
  height: 30px;
  -webkit-appearance: none;
  outline: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font: normal normal normal 24px/1 "Material Design Icons";
  -webkit-filter: none !important;
  filter: none !important;
}

input.core-power-toggle:checked::before {
  content: "\F0079";
  color: green;
}
input.core-power-toggle:not(:checked)::before {
  content: "\F007A";
  color: grey;
}

.overcharge-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;

  .lancer-flow-button {
    justify-self: center;
  }

  .overcharge-text {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.8em;
  }
}

.overcharge-heat-wrapper {
  justify-content: flex-end;

  .overcharge-heat {
    color: #fc3e0f;
    flex-grow: unset;
    width: 1.5em;
  }
}

/* Some flex helpers */
@mixin wr-item($prefix, $percent, $margin) {
  &.#{$prefix} > * {
    flex: 1 0 calc(#{$percent} - #{$margin * 2});
    margin: 3px;
  }

  &.#{$prefix} > .double {
    flex: 1 0 calc(#{$percent * 2} - #{$margin * 2});
  }

  &.#{$prefix} > .triple {
    flex: 1 0 calc(#{$percent * 3} - #{$margin * 2});
  }

  &.#{$prefix} > .quadruple {
    flex: 1 0 calc(#{$percent * 4} - #{$margin * 2});
  }

  &.#{$prefix} > .quintuple {
    flex: 1 0 calc(#{$percent * 5} - #{$margin * 2});
  }

  &.#{$prefix} > .hextuple {
    flex: 1 0 calc(#{$percent * 6} - #{$margin * 2});
  }
}

.wraprow {
  display: flex;
  flex-wrap: wrap;

  @include wr-item("double", 50%, 3px);
  @include wr-item("triple", 33.33%, 3px);
  @include wr-item("quadruple", 25%, 3px);
  @include wr-item("quintuple", 20%, 3px);
  @include wr-item("hextuple", 16.66%, 3px);

  /* 3/3. However, we generalize */
  &.double > .full,
  &.triple > .full,
  &.quadruple > .full,
  &.quintuple > .full,
  &.hextuple > .full {
    flex: 1 0 calc(100% - 6px);
    margin: 3px;
  }
}

.grow {
  flex-grow: 1;
}

.no-grow {
  flex-grow: 0 !important;
}

.no-wrap {
  flex-wrap: nowrap !important;
}

/* Glow effect courtesy of https://codepen.io/jackrugile/pen/ABeIi */
@mixin glow {
  animation: glow-anim 800ms ease-out infinite alternate;
  background: #222922;
  background: linear-gradient(#333933, #222922);
  border-color: #393;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1), 0 2px 0 #000;
  color: #efe;
  outline: none;
}

@keyframes glow-anim {
  0% {
    border-color: #393;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1), 0 2px 0 #000;
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.4), 0 2px 0 #000;
  }
}

.skill-compact {
  display: grid;
  grid-template: 2em 1fr / 100px 1fr;
  align-items: center;
  margin-right: 25px;
  a.flexrow.skill-flow {
    margin-inline: 1.2em;
  }
}

ul.talent-ranks {
  padding: 0;
}

.talent-rank-compact {
  display: grid;
  grid-template: auto 1fr / auto auto 1fr;
  grid-template-areas:
    "rank chat title"
    "desc desc desc";
}

.card.lancer-border-talent.talent-rank-sep-border {
  border-width: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
}

.major {
  font-size: 18px;
  font-weight: bold;
}

.action-detail,
.deployable-detail,
.core-active-detail,
.core-passive-detail {
  text-align: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.activation-chip,
.activation-chip.lancer-button {
  align-self: flex-end;
  margin-top: 5px;
  font-size: 12px;
  height: 24px;
  color: var(--light-text);
  border-radius: 4px !important;
  align-items: center;
  // cursor: default;
  display: inline-flex;
  line-height: 20px;
  max-width: 100%;
  outline: none;
  overflow: hidden;
  padding: 0 12px 0px 5px;
  text-decoration: none;
  transition-duration: 0.28s;
  transition-property: box-shadow, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  white-space: nowrap;
  margin-bottom: 5px;
  margin-right: 5px;
}

.action-wrapper,
.deployable-wrapper,
.core-active-wrapper,
.core-passive-wrapper,
.core-wrapper {
  border-radius: 10px;
  background-color: var(--darken-1);
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 4px;

  .title-wrapper {
    text-align: left;

    .activation-chip {
      max-width: fit-content;
    }
  }
}

.action-flow-container {
  float: left;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .activation-chip,
  .lancer-button {
    height: 100%;
    margin: 0;

    span {
      padding-right: 0.2em;
    }
  }

  .vsep {
    margin: 0.1em 0.7em;
  }
}
.core-wrapper {
  border-radius: 0px;
  border-width: 2px;
  border-style: solid;

  .core-active-activate {
    margin: 0 0.2em;
    align-items: center;

    .active-label {
      flex-grow: 0;
      min-width: fit-content;
      margin-right: 0.5em;
    }

    .activation-chip {
      width: 100%;
      height: auto;
      left: 0px;
      right: 0px;
      font-size: 1.1em;
      justify-content: space-between;

      .flexcol {
        align-items: center;
      }
      b {
        white-space: normal;
        text-align: center;
      }
    }
  }
}

.action-wrapper,
.core-active-wrapper,
.core-passive-wrapper {
  display: flex;
  flex-direction: column;
}

.deployable-wrapper {
  display: grid;
  grid-template-columns: 48px auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "img title title"
    "chip chip desc"
    "action action action";

  &.vertical {
    grid-template-columns: 48px auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "img title"
      "chip chip"
      "desc desc"
      "action action";

    .flexcol {
      flex-grow: 1;
    }

    .deployable-activations {
      margin-left: 0;
    }

    .activation-chip {
      margin: 1px 2px;
    }
  }

  img.deployable-thumbnail {
    padding: 0.25em 0.5em;
    grid-area: img;
    border: none;
    align-self: center;
  }

  .title-wrapper {
    padding-left: 0.5em;
  }

  .deployable-activations {
    grid-area: chip;
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
    margin-left: 0.5em;

    .activation-chip {
      max-height: 20px;
      display: flex;
      justify-content: center;
      margin-top: 0.1em;
      margin-bottom: 0.1em;
    }
  }
}

.action-wrapper,
.deployable-wrapper {
  border-color: var(--secondary-color);
  border-width: 1px;
  border-style: solid;
}

.action-title,
.deployable-title,
.coresys-title,
.core-active-title,
.core-passive-title {
  font-size: 16px;
  margin-top: 3px;
  margin: auto;
}

a.activation-chip > i.fas,
a.activation-chip > i.cci,
a.activation-chip > i.mdi {
  margin-right: 6px;
}

.stat-card {
  display: grid;
  grid-template: 1fr 1fr / 1fr;
}

.stat-flow-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.stat-container,
.stat-flow-container {
  align-items: center;
}

.stat-flow-container > a {
  margin: auto;
}
/* Frame descriptor, probably-but-not-necessarily in mech-loadout */
.mech-frame {
  .coresys-title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .frame-trait {
    margin: 2px;
    flex-grow: unset;
  }

  .frame-traits,
  .core-wrapper {
    width: 50%;
    max-width: calc(50% - 6px);
  }

  .frame-active,
  .frame-passive {
    margin: 0 4px;
  }
}

.lancer.actor.mech.sheet {
  /* The main, top region */
  .stat-grid {
    display: grid;
    grid-template: repeat(5, 5em) / repeat(5, 1fr);

    /* Most things auto-layout just fine */

    /* The pilot portrait slot */
    .pilot-summary {
      grid-column-start: 5;
      grid-row: 1/3; // Double-height
    }

    /* Hex size indicator */
    .size-card {
      grid-column-start: 5;
      grid-row: 3 / 5; // Double-height
      margin: auto;
    }

    /* Button to open inventory */
    .inventory {
      grid-column-start: 5;
      grid-row: 5 / 6;
      margin: auto;
    }

    /* 2x2 HASE block */
    .hase {
      grid-row: -4/-2;
      grid-column: 4/5;
      margin: 0px 7px;
      flex-grow: unset;

      .stat-flow-container {
        grid-template: auto / fit-content(75%) auto;
      }
    }
  }
}

.pilot-summary {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 3px;

  position: relative;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 1;
  min-height: 0;

  .license-level {
    position: absolute;
    right: 0.5em;
    top: 0px;
    font-size: 1.6em;
    width: 60%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 32% 100%);
    background-color: var(--primary-color);
  }

  img {
    border: unset;
    object-fit: cover;
  }
}

.loading-wrapper {
  align-items: center;
  margin-top: 0.75em;
  max-width: fit-content;
}

.uses-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 4px;
  margin-top: 4px;
}

.uses-hex,
.power-uses-hex,
.counter-hex,
.loaded-hex,
.charged-hex {
  cursor: pointer;
  font-size: 2em;
  color: var(--light-text);
}

.counter-hex[data-available="true"] {
  color: var(--primary-color);
  filter: brightness(1.25);
}

.sp-wrapper {
  display: flex;
  width: fit-content;
  max-width: fit-content;
  align-items: center;
}

.weapon-profile-wrapper {
  padding: 8px 8px 0px 5px;
  background-color: var(--primary-color);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.weapon-profile {
  color: var(--light-text);
  background-color: var(--primary-color);
  align-items: center;
  min-height: 2em;
  text-align: center;
  padding: 0px 9px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.weapon-profile:hover {
  box-shadow: var(--hover-bright);
}

.weapon-profile.selected-profile {
  color: var(--primary-color);
  background-color: var(--light-text);
  /* font-weight: bold; */
}

.weapon-mod-addon {
  background-color: var(--trait-color);
  margin: 0px 3px 0.5em 3px;
  color: var(--light-text);
  align-items: center;
  min-height: 2em;
}

.weapon-mod-addon > span {
  margin-left: 0.5em;
}

.mech-weapon-wrapper {
  margin-bottom: 4px;
}

// CSS for Item-level Editing

.sheet-weapon-mod {
  margin-right: 1em;
}

.sheet-weapon-mod > .flexcol > * {
  flex-grow: unset;
  margin-bottom: 0.25em;
}

.uses-editor > span {
  padding: inherit;
  text-align: center;
  background-color: var(--darken-2);
  margin-bottom: 4px;
}

.uses-editor {
  background-color: var(--darken-2);
  padding-bottom: 0.5em;
  margin-bottom: auto;
}

.item-edit-arrayed .gen-control {
  flex-grow: unset;
  margin: 5px;
}

.gen-control.add-question {
  float: left;
  margin-left: 10px;
  border: 1px solid var(--darken-5);
  border-radius: 4px;
  padding: 3px;
}

.bond-question {
  .bond-question-row {
    display: flex;
    align-items: center;
    margin-right: 1em;

    a {
      flex: 0 0 auto;
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  .bond-question-options {
    margin-top: 0;
    margin-bottom: 0.25em;

    .bond-question-option-row {
      display: flex;
      align-items: center;
      margin-right: 3em;

      a {
        flex: 0 0 auto;
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }
}

.bond-ideal-row {
  display: flex;
  align-items: center;
  margin-right: 1em;

  .bond-ideal {
    flex-grow: 1;
  }

  a {
    flex: 0 0 auto;
    padding-left: 5px;
    padding-right: 5px;
  }
}

.action-editor-wrapper {
  float: right;
  margin-right: 0.5em;
  max-width: fit-content;
}

.action-editor {
  .flexrow {
    padding-bottom: 0.5em;
  }
}

// Stabilize dialog
// Begin "Button" radio buttons

.stabilize-wrapper {
  .button-label {
    background-color: var(--secondary-color);
    color: var(--secondary-text);
    flex-basis: 45%;

    i.checked-icon {
      display: none;
    }
  }

  .hidden {
    display: none;
  }

  .radio-label:checked + .button-label {
    background-color: var(--primary-color);
    color: var(--light-text);

    i.checked-icon {
      display: inline;
    }
  }

  .radio-label + .button-label:hover {
    filter: brightness(120%);
  }

  .button-label {
    display: grid;
    grid-template-columns: 2em 2em auto;
    padding: 1em;
    margin: 0.5em;
    cursor: pointer;
    border-radius: 0.25em;
    box-shadow: 0 3px 10px var(--darken-2);
    user-select: none;
    align-items: center;

    i,
    span {
      text-align: center;
    }
  }

  .center-text {
    display: table;
    text-align: center;
  }
}

// Effects
.active-effect {
  border-radius: 5px;
  border: black solid 1px;
  display: grid;
  grid-template-columns: 1fr 30px;
  justify-items: start;
  margin: 3px;
  padding: 3px;
}

// Flows
.lancer-flow-button-grid {
  display: flex;
  margin-bottom: 8px;
  padding: 4px;
}

.lancer-flow-button-grid button,
.bond-xp-button,
.refresh-powers-button {
  margin: 4px;
  border-radius: 15px 0px;
}

.lancer button,
.lancer-button {
  border: 1px solid var(--darken-3);
  border-radius: 5px;
  padding: 0.25em;
  background: var(--light-gray-color);
  color: var(--dark-text);
  box-shadow: var(--button-shadow);

  &:hover {
    box-shadow: var(--button-shadow), var(--hover-bright);
  }

  &.noninteractive {
    cursor: default;
    text-shadow: none;
    box-shadow: none;
  }

  &:disabled {
    cursor: not-allowed;
    text-shadow: none;
    box-shadow: none;
    filter: brightness(0.7);
  }

  // TODO: make all chat buttons tighter. Needs alignment
  // work in other styles/chat cards.
  .chat-message .lancer-damage-button-group & {
    width: fit-content;
    display: flex;

    & i {
      margin: 0;

      & ~ i {
        margin-left: -0.4em;
      }
    }
  }

  & i.damage--kinetic {
    color: var(--light-text);
  }
}

.lancer-damage-button-group {
  display: flex;
  align-items: center;
  max-width: min-content;
  border-radius: 5px;
  box-shadow: var(--button-shadow);

  .lancer-damage-apply-select {
    width: min-content;
    border: 1px solid var(--darken-4);
    border-radius: 5px;
    padding: 0.25em;
    background: var(--darken-1);
    text-align: center;

    & option {
      background: var(--light-gray-color);
      color: var(--dark-text);
    }

    &:has(+ .lancer-button) {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-right: 0px;
      padding-right: 0px;
      height: 29px;
    }

    & + .lancer-button {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      margin-left: 0px;
      padding-left: 0px;
      margin-right: 0px;
      height: 29px;
      box-shadow: none;

      &:hover {
        box-shadow: var(--hover-bright);
      }
    }
  }
}

.chat-message .lancer-damage-applied {
  & i.cci {
    margin-right: -0.2em;
  }
}

.bond-xp-button {
  margin-left: 1em;
  margin-right: 1em;
}

// Actions
.lancer-action-grid {
  display: flex;
}

.lancer-action-button {
  margin: 0 4px;

  &.enabled {
    cursor: pointer;
  }

  &.active {
    color: var(--light-text);
    font-weight: bold;
  }
}

.track-message.lancer-action-grid {
  flex-wrap: wrap;
}
.lancer-action-badge {
  background-color: var(--light-gray-color);
  margin: 3px;
  width: fit-content;
}

#action-manager {
  flex-direction: column;
  position: fixed;
  z-index: 100;
  background-color: #eaeaea;
  border: 1px solid #5d5d5d;
}
#action-manager.hidden {
  display: none !important; // Because apparently you need to do this.
}
#action-manager-drag {
  cursor: move;
  font-size: 1.5em;
  padding: 12px 4px 0px 8px;
}
#action-manager-reset {
  display: inline-flex;
  padding: 2px;
}
#action-manager.noclick a {
  cursor: unset !important;
}

.action-bar {
  display: flex;
  align-items: center;
}
.action-label {
  display: inline-flex;
  padding-left: 12px;
  border-bottom: 1px solid black;
  background-color: var(--primary-color);
  color: var(--light-text);
  font-style: italic;
}

a.action {
  font-size: 36px;
  margin: 4px;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  background-color: #616161;

  i {
    display: inline-flex;
    padding-top: 1px;
  }

  &:hover {
    -moz-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
    text-shadow: none;
  }
}

// TIPPY
.tippy-box[data-theme~="lancer-small"] {
  font-size: 1.1em;
  padding-left: 8px;
  padding-right: 8px;
  transform: skew(30deg);

  .tippy-content {
    transform: skew(330deg);
  }
}

.lancer-context-menu {
  display: inline-block;
  min-width: 20px;
}

.locked .lancer-context-menu {
  // Hide context menus on locked sheets
  display: none;
}

.tippy-box[data-theme~="lancer-large"] {
  background: var(--tooltip-background) !important;
  background-color: var(--tooltip-background) !important;
  color: var(--tooltip-text);
  max-width: 50vw;
  border: 1px var(--primary-color) solid;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  width: auto;

  .lancer-context-item {
    padding: 0.25rem;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;

    i {
      margin-right: 5px;
    }

    &:hover {
      background: var(--secondary-highlight);
    }
  }
}

// V-IMPORTS
.white--text {
  color: var(--light-text) !important;
  caret-color: var(--light-text) !important;
}

.v-divide {
  align-self: stretch;
  border: solid;
  border-width: 0 thin 0 0;
  display: inline-flex;
  height: inherit;
  min-height: 100%;
  max-height: 100%;
  max-width: 0;
  width: 0;
  vertical-align: text-bottom;
  margin: 0 8px;
  padding: 4px;
  color: #888888;
}

// Mech
.mech-preview {
  display: grid;
  grid-template-rows: 2em 3em 3em 3em 3em 3em;
  grid-template-columns: 14em 1fr 1fr;
  margin-top: 0.5em;
  margin-bottom: 1em;
  border-width: 2px;
  border-style: solid;
  background-color: var(--darken-2);

  .activate-mech {
    flex-grow: unset;
    font-size: 2em;
    height: 1em;
  }

  .deactivate-mech {
    font-size: 1.5em;
    height: 1em;
    margin-right: 0.4em;
  }

  & img {
    grid-row: 2 / -1;
    height: 100%;
  }
}

.mech-preview-titlebar {
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  color: var(--light-text);
  font-size: 1.2em;
  font-weight: bold;
  padding: 3px 10px;
  min-height: max-content;
  align-items: center;
  margin-right: 5em;

  &.active {
    background-color: var(--primary-color, fuchsia);
    color: var(--light-text);
  }
  &.inactive {
    background-color: var(--dark-gray-color, fuchsia);
    color: var(--light-text);
  }
}

.mech-preview-stat-wrapper {
  display: grid;
  grid-template-columns: 3em 10em 1fr;
  align-items: center;
}

.limited-card {
  max-width: fit-content;
  display: inline-flex;
  flex-direction: row;
  padding: 4px 8px;
  margin: 3px;
  justify-content: space-between;
  align-items: center;
  color: var(--light-text);
  background-color: var(--dark-gray-color);

  span {
    min-width: fit-content;
  }

  &.non-interactive a,
  &.non-interactive .uses-hex {
    cursor: default;
    text-shadow: none;
    box-shadow: none;
  }
}

.counter-name {
  max-width: 90%;
  width: fit-content !important;
  color: var(--light-text) !important;
}

// needed to override a builtin that removes all shadows from the sidebar
#sidebar a.chat-button:hover {
  text-shadow: 0 0 8px var(--color-shadow-primary);
}

#sidebar a.chat-button {
  animation: pulse 1200ms ease 1s 8 alternate;
}

@keyframes pulse {
  0% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0 8px var(--color-shadow-primary);
  }
}

/* By default, edit*/
.locked {
  /* Only show edit button if not locked*/
  .popout-text-edit-button {
    display: none;
  }
}

/* Editable is a built-in class on application windows containing editable sheets.
Here, this means we want to allow for drag stuff etc to show contextually if:
- We are dragging the appropriate type 
- The app is editable
- the box is a context-drop of the appropriate corresponding type
*/
@each $e-type in $document-types {
  .drop-target-#{$e-type} {
    display: none;
  }

  .dragging-#{$e-type} .editable .drop-target-#{$e-type} {
    display: revert !important;
    height: 100%;
    z-index: 100;
  }
}

.lid-list {
  position: relative;
  min-height: 6em;
}

.line-drop-target {
  @include glow;
  align-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  opacity: 95%;
  z-index: -100;
  transition: all 0.5s;
}

.slot:not(.set) {
  align-items: center;
}

.disabled-cloud {
  color: lightgray;
  pointer-events: none;
  cursor: default;
}

.overline {
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.1em !important;
  line-height: 1.2rem;
  text-transform: uppercase;
  font-family: Roboto, sans-serif !important;
}

/* this forces all its children to share the same space,
    which is useful for svelte transitions */
.grid-enforcement {
  display: grid;
}

.grid-enforcement > * {
  grid-column: 1/2;
  grid-row: 1/2;
}
