@import "./properties.css";
@import "../typography.css";

.linearProgress,
.linearProgress * {
  box-sizing: border-box;
}

.linearProgress {
  height: var(--progress-linear-height);
  overflow: hidden;
  width: var(--progress-linear-width);
}

.background {
  background-color: var(--progress-linear-back-background-color);
  border-radius: var(--progress-linear-back-border-radius);
  height: var(--progress-linear-back-height);
}

.fill {
  background-image: var(--progress-linear-fill-background);
  border-radius: var(--progress-linear-back-border-radius);
  height: var(--progress-linear-back-height);
  left: 0;
  top: 0;
  will-change: width;
}

.number {
  color: var(--progress-linear-number-color);
  display: inline-block;
  font-family: var(--progress-linear-number-font-family);
  font-size: var(--progress-linear-number-font-size);
  font-weight: var(--body-text-weight);
  height: 100%;
  margin-top: var(--progress-linear-number-margin-top);
  text-align: right;
  width: 100%;
}

.filledLabel {
  color: var(--progress-linear-number-color-filled);
}

.disabled {
  cursor: not-allowed;
  user-select: none;

  & .background {
    background-color: var(--progress-linear-back-background-disabled);
  }

  & .fill {
    background-color: var(--progress-linear-fill-background-disabled);
    background-image: none;
  }

  & .number {
    color: var(--progress-linear-number-color-disabled);
  }
}