@value (
    spaceXSmall,
    spaceXXSmall
) from '../../styles/variables/_space.css';
@value (
    borderRadiusSmall,
    borderRadiusXSmall
) from '../../styles/variables/_border.css';

.scoreBarWrapper {
  display: flex;
  padding: spaceXSmall;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.scoreBarContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(spaceXXSmall / 2);
  width: var(--width);
  height: var(--height);
  flex-direction: var(--direction);
}

.bar {
  width: var(--width);
  height: var(--height);
  border-radius: borderRadiusXSmall;
  background-color: var(--background-color);
}

.scoreBarBorder {
  composes: borderPrimary from '../../styles/border.module.css';
  border-radius: borderRadiusSmall;
}

.scoreBarLabel {
  padding-left: spaceXSmall;
}