@use '../variables.scss' as *;

.character {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  height: 46px;
  white-space: nowrap;

  &.vault {
    width: calc(6px + var(--character-column-width) - var(--item-margin));
    @include phone-portrait {
      width: auto;
    }
  }

  &.current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-top: 13px solid $orange;
    border-right: 13px solid transparent;
  }

  &.destiny2 {
    .background {
      filter: none;
    }
  }

  @media (hover: hover) {
    &:hover,
    &:active {
      position: relative;
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border: 1px solid white;
      }
    }
  }
}

.loadout-button {
  background-color: black;
  width: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lang-ja {
  .class {
    font-size: 16px;
  }
}

.lang-ru {
  .vault .class {
    font-size: 16px;
  }
}

@use '../variables.scss' as *;

.character {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  height: 46px;
  white-space: nowrap;

  &.vault {
    width: calc(6px + var(--character-column-width) - var(--item-margin));
    @include phone-portrait {
      width: auto;
    }
  }

  &.current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-top: 13px solid $orange;
    border-right: 13px solid transparent;
  }

  &.destiny2 {
    .background {
      filter: none;
    }
  }

  @media (hover: hover) {
    &:hover,
    &:active {
      position: relative;
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border: 1px solid white;
        pointer-events: none;
      }
    }
  }
}

.loadout-button {
  background-color: black;
  width: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lang-ja {
  .class {
    font-size: 16px;
  }
}

.lang-ru {
  .vault .class {
    font-size: 16px;
  }
}

Make D1 prestige XP tooltip easier to trigger.
Make D1 prestige XP tooltip easier to trigger.
