wanderer/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.module.scss

@import '@/hooks/Mapper/components/map/styles/eve-common-variables';

.RootCustomNode {
  background-color: var(--rf-node-bg-color, #202020) !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-weight: var(--rf-node-font-weight, bold);
  color: var(--rf-text-color, #ffffff);
  font-family: var(--rf-node-font, inherit);
}

/* Region backgrounds for optional tinted headers, etc. */
.Mataria,
.Amarria,
.Gallente,
.Caldaria {
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: -1;
    border-radius: 3px;
  }
}
.Mataria::before {
  background-image: url('/images/mataria-180.png');
  opacity: 0.6;
  background-position-x: 1px;
  background-position-y: -14px;
}
.Caldaria::before {
  background-image: url('/images/caldaria-180.png');
  opacity: 0.6;
  background-position-x: 1px;
  background-position-y: -10px;
}
.Amarria::before {
  opacity: 0.45;
  background-image: url('/images/amarr-180.png');
  background-position-x: 0;
  background-position-y: -13px;
}
.Gallente::before {
  opacity: 0.5;
  background-image: url('/images/gallente-180.png');
  background-position-x: 1px;
  background-position-y: 0;
}

.selected {
  border-color: var(--pastel-pink, #d291bc);
  box-shadow: 0 0 10px #9a1af1c2;
}

.eve-system-status-home {
  border: 1px solid var(--eve-solar-system-status-color-home-dark30);
  background-image: linear-gradient(
    275deg,
    var(--eve-solar-system-status-friendly),
    transparent
  );
  &.selected {
    border-color: var(--eve-solar-system-status-color-home);
  }
}
.eve-system-status-friendly {
  border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
  background-image: linear-gradient(
    275deg,
    var(--eve-solar-system-status-friendly-dark30),
    transparent
  );
  &.selected {
    border-color: var(--eve-solar-system-status-color-friendly-dark5);
  }
}
.eve-system-status-lookingFor {
  border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
  background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
  &.selected {
    border-color: var(--pastel-pink, #d291bc);
  }
}
.eve-system-status-warning {
  background-image: linear-gradient(
    275deg,
    var(--eve-solar-system-status-warning),
    transparent
  );
}
.eve-system-status-dangerous {
  background-image: linear-gradient(
    275deg,
    var(--eve-solar-system-status-dangerous),
    transparent
  );
}
.eve-system-status-target {
  background-image: linear-gradient(
    275deg,
    var(--eve-solar-system-status-target),
    transparent
  );
}

.Bookmarks {
  position: absolute;
  width: 100%;
  z-index: 1;
  display: flex;
  left: 4px;
}
.Bookmark {
  min-width: 13px;
  height: 22px;
  position: relative;
  top: -13px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 8px;
  text-align: center;
  padding-top: 2px;
  font-weight: bolder;
  padding-left: 3px;
  padding-right: 3px;
  &:not(:first-child) {
    box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
  }
}
.BookmarkWithIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 1);
  padding-right: 2px;
  .icon {
    width: 8px;
    height: 8px;
    font-size: 8px;
  }
  .text {
    margin-top: 1px;
    font-size: 9px;
  }
}


.TagTitle {
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
  color: var(--rf-tag-color, #ffb01d);
}

/* The top row (HeadRow). */
.HeadRow {
  position: relative;
  top: 1px;

  .classTitle {
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.73);
    font-size: 11px;
  }

  @-moz-document url-prefix() {
    .classSystemName {
      font-family: var(--rf-node-font, inherit);
      font-weight: bold;
    }
  }
}

/* Usually ~19px tall for bottom row. */
.BottomRow {
  height: 19px;

  .localCounter {
    display: flex;
    gap: 2px;
  }
  .hasUserCharacters {
    color: var(--rf-has-user-characters, #fbbf24);
  }
}

/* The systemName overflow + effect icon, etc. */
.systemNameOverflow {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: sans-serif;
}
.effect {
  width: 8px;
  height: 8px;
  margin-top: -2px;
  border-radius: 2px;
  margin-left: 1px;
}
.statics {
  @-moz-document url-prefix() {
    position: relative;
    top: -1px;
  }
}

/* The node's invisible handles/double-click overlay. */
.Handlers {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* The little React Flow handles on each edge. */
.Handle {
  border: 1px solid var(--pastel-blue, #5a7d9a);
  width: 5px;
  height: 5px;

  &.selected {
    border-color: var(--pastel-pink, #d291bc);
  }

  &.HandleTop {
    top: -2px;
  }
  &.HandleRight {
    right: -2px;
  }
  &.HandleBottom {
    bottom: -2px;
  }
  &.HandleLeft {
    left: -2px;
  }

  &.Tick {
    width: 7px;
    height: 7px;

    &.HandleTop {
      top: -3px;
    }
    &.HandleRight {
      right: -3px;
    }
    &.HandleBottom {
      bottom: -3px;
    }
    &.HandleLeft {
      left: -3px;
    }
  }
}

/* Unsplashed signature containers. */
.Unsplashed {
  position: absolute;
  width: calc(50% - 4px);
  z-index: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  left: 2px;
  &--right {
    left: calc(50% + 6px);
  }
}