stacjownik/src/styles/_badge.scss

@use 'responsive';

.badge {
  font-weight: 600;

  display: inline-block;
  padding: 0;

  margin: 0.25em;

  & > span,
  & > a > 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 responsive.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: inline-block;
  gap: 0.3em;

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

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

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

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

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

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

.spawn-badge {
  color: white;

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

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

.stat-badge {
  margin: 0;
  color: white;

  & > span:first-child {
    background-color: var(--clr-primary);
    color: black;
  }
}

.timetable-status-badge {
  padding: 0.05em 0.35em;
  color: black;

  &.terminated {
    background-color: salmon;
  }

  &.fulfilled {
    background-color: lightgreen;
  }

  &.active {
    background-color: lightblue;
  }
}