/* Actually misnomer. The trait class is used for all icons */
.trait {
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.trait img {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
}

/* Invert colors for certain backgrounds, to make icons white instead of black */
.trait.trait-fx-invert img {
  filter: invert(100%);
}

.trait.trait-fx-trmaster img {
  /* convert icon from black to pink */
  filter: invert(64%) sepia(91%) saturate(4259%) hue-rotate(305deg) brightness(99%) contrast(103%);
}

.trait.trait-fx-positive3 img {
  /* convert icon from black to green */
  filter: invert(31%) sepia(85%) saturate(1493%) hue-rotate(67deg) brightness(94%) contrast(103%);
}

/* trait backgrounds image (the variable is defined in the element style="...") */
.trait>*::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  background-size: cover;
  background-image: var(--trait-bg-image, none);
}

/* tier text (I, IV, III, ...) */
.trait>*::after {
  position: absolute;
  font-size: 16px;
  font-weight: bold;

  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;

  top: 0;
  right: 1px;

  pointer-events: none;
}

.trait-tier1>*::after {
  content: 'I';
}

.trait-tier2>*::after {
  content: 'II';
}

.trait-tier3>*::after {
  content: 'III';
}

.trait-tier4>*::after {
  content: 'IV';
}

.trait-tier5>*::after {
  content: 'V';
}

.trait-tier6>*::after {
  content: 'VI';
}

.trait-tier7>*::after {
  content: 'VII';
}

.trait-tier8>*::after {
  content: 'VIII';
}

.trait-tier9>*::after {
  content: 'IX';
}

.trait-tier10>*::after {
  content: 'X';
}

.trait-plus>*::after {
  content: '+';
}

.trait-minus>*::after {
  content: '-';
}

.trait-cross>*::after {
  content: 'X';
}

/* CSS for rarity indicator */
.rarity>*::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /*
  background-size: cover;
  background-image: var(--trait-bg-image, none);
  */
}

/* More CSS for rarity indicators */
.rarity>*::after {
  position: absolute;
  font-size: 16px;
  font-weight: bold;

  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;

  top: 0;
  right: 1px;

  pointer-events: none;
}

/* rarity triangle - black border */
.rarity-legendary::before,
.rarity-epic::before,
.rarity-rare::before,
.rarity-uncommon::before,
.rarity-always::before,
.rarity-never::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: transparent black transparent transparent;
  pointer-events: none;
  z-index: 6;
}

/* rarity triangle */
.rarity-legendary::after,
.rarity-epic::after,
.rarity-rare::after,
.rarity-uncommon::after,
.rarity-always::after,
.rarity-never::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 0;
  border-color: transparent;
  pointer-events: none;
  z-index: 7;
}

.rarity-legendary::after {
  border-right-color: rgb(255, 196, 4);
}

.rarity-epic::after {
  border-right-color: rgb(132, 0, 255);
}

.rarity-rare::after {
  border-right-color: rgb(0, 47, 255);
}

.rarity-uncommon::after {
  border-right-color: rgb(43, 255, 0);
}

.rarity-never::after {
  border-right-color: red;
}

.rarity-always::after {
  border-right-color: rgb(0, 255, 213);
}

.text-rarity-legendary:not(:hover) {
  color: rgb(255, 226, 129) !important;
}

.text-rarity-epic:not(:hover) {
  color: rgb(196, 132, 255) !important;
}

.text-rarity-rare:not(:hover) {
  color: rgb(134, 156, 255) !important;
}

.text-rarity-uncommon:not(:hover) {
  color: rgb(151, 255, 130) !important;
}

.text-rarity-never:not(:hover) {
  color: rgb(255, 133, 133) !important;
}

.text-rarity-always:not(:hover) {
  color: rgb(0, 255, 213);
}

.border-rarity-legendary {
  --border-color: rgb(255, 226, 129);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-epic {
  --border-color: rgb(196, 132, 255);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-rare {
  --border-color: rgb(134, 156, 255);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-uncommon {
  --border-color: rgb(151, 255, 130);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-common {
  --border-color: rgb(255, 255, 255);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-never {
  --border-color: rgb(255, 133, 133);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.border-rarity-always {
  --border-color: rgb(0, 255, 213);
  border-bottom-color: var(--border-color);
  border-right-color: var(--border-color);
}

.negtraitcard {
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.negtraitcard:before,
.negtraitcard:after {
  position: absolute;
  content: '';
  background: red;
  display: block;
  width: 100%;
  height: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  pointer-events: none;
}

.negtraitcard:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}