@import 'styles/mixins';

.character {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition);

  &.finished {
    opacity: var(--opacity--disabled);
  }

  &.overused {
    opacity: 1;

    .tile {
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: ' ';
        border-radius: inherit;
        box-shadow: var(--box-shadow--error);
      }
    }
  }
}

.remaining {
  height: 6px;
  margin-top: var(--spacing--m);
  box-shadow: var(--box-shadow--raised);

  @include media('<xs') {
    box-shadow: var(--box-shadow--raised--subtle);
  }
}

.count {
  padding: var(--spacing--xs) 0;
  font-size: var(--font--size--m);
  white-space: nowrap;
}