.container {
  display: flex;
  width: 100%;
  background-color: var(--background-accent);
  border-radius: var(--radius-normal);
}

.bar {
  flex: 0 0 auto;

  &:first-child {
    border-top-left-radius: var(--radius-normal);
    border-bottom-left-radius: var(--radius-normal);
  }

  &:last-child {
    border-top-right-radius: var(--radius-normal);
    border-bottom-right-radius: var(--radius-normal);
  }
}

.color-accent {
  background-color: var(--accent-background);
}
.color-success {
  background-color: var(--status-success-background);
}
.color-info {
  background-color: var(--status-info-background);
}
.color-warning {
  background-color: var(--status-warning-background);
}
.color-danger {
  background-color: var(--status-danger-background);
}
.color-default {
  background-color: var(--status-default-background);
}
.color-inherit {
  background-color: inherit;
}

.size-normal {
  height: 8px;
}

.size-large {
  height: 16px;
}