.badge {
  font-weight: 600;

  display: inline-block;
  padding: 0;

  margin: 0.25em;

  span {
    display: inline-block;
    background: #585858;
    padding: 0.2em 0.4em;
  }

  &-none {
    font-weight: 600;

    padding: 0.2em 0.4em;
    background: firebrick;

    text-align: center;

    @include smallScreen() {
      font-size: 1em;
    }
  }
}

.level-badge {
  display: flex;
  justify-content: center;
  align-items: center;

  &.driver {
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
  }

  &.dispatcher {
    border-radius: 0.25em;

    width: 1.6em;
    height: 1.6em;
  }
}

.region-badge {
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  font-weight: bold;
  color: white;

  &[aria-describedby='eu'] {
    background-color: forestgreen;
  }

  &[aria-describedby='cae'] {
    background-color: lightcoral;
    color: black;
  }

  &[aria-describedby='usw'] {
    background-color: lightblue;
    color: black;
  }

  &[aria-describedby='us'] {
    background-color: lightblue;
    color: black;
  }

  &[aria-describedby='ru'] {
    background-color: lightslategray;
  }
}

.train-badge {
  display: flex;
  align-items: center;
  gap: 0.5em;

  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  font-weight: bold;

  font-size: 0.9em;

  &.twr {
    background-color: var(--clr-twr);
    box-shadow: 0 0 5px 1px var(--clr-twr);
    color: black;
  }

  &.skr {
    background-color: var(--clr-skr);
    box-shadow: 0 0 5px 1px var(--clr-skr);
  }

  &.offline {
    background-color: #be3728;
  }
}

.spawn-badge {
  color: white;

  .length {
    background-color: #404040;
    color: #cfcfcf;
  }

  &[data-electrified='true'] > .name {
    background-color: #007599;
  }
}