/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-journey-level {
  display: block;
  margin: 6pt 0;
}
sharpen-journey-level .level-name .sharpen-icon {
  font-size: 24pt;
  margin-right: 0.25em;
  vertical-align: -8px;
  background-color: white;
}
sharpen-journey-level .level-name button {
  font-size: 16pt;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
sharpen-journey-level .level-name button:hover {
  text-decoration: underline;
}
sharpen-journey-level[status=current] .level-name .sharpen-icon {
  color: var(--color-pine);
}
sharpen-journey-level[status=current] .level-name button {
  color: black;
}
sharpen-journey-level[status=unstarted] .level-name button, sharpen-journey-level[status=completed] .level-name button {
  color: var(--color-gray-1);
}
sharpen-journey-level[status=unstarted] .level-name .sharpen-icon {
  color: var(--color-gray-4);
}
sharpen-journey-level[status=completed] .level-name .sharpen-icon {
  color: var(--color-gray-1);
}
sharpen-journey-level .level-content {
  display: none;
  margin-left: 2.6rem;
}
sharpen-journey-level .level-content.open {
  display: block;
}
sharpen-journey-level .level-description {
  font-size: var(--font-size-xs);
  color: var(--color-gray-1);
  margin: var(--spacing-sm) 0;
}
sharpen-journey-level .level-unit-count {
  margin: var(--spacing-md) 0 var(--spacing-xs);
}
sharpen-journey-level .level-units > * {
  vertical-align: -5px;
  margin-right: var(--spacing-xs);
}
sharpen-journey-level .level-units .sharpen-icon {
  color: var(--color-evergreen);
}
sharpen-journey-level .level-units .unit-number {
  width: 21px;
  height: 21px;
  display: inline-block;
  color: var(--color-gray-2);
  background-color: var(--color-gray-4);
  border-radius: 100%;
  font-size: var(--font-size-xs);
  text-align: center;
  line-height: 1.3;
  vertical-align: 2px;
}
sharpen-journey-level .level-units .unit-number.current {
  background-color: var(--color-mint);
}
sharpen-journey-level .unit-progress {
  margin: var(--spacing-md) 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
}
sharpen-journey-level .unit-progress .sharpen-icon {
  font-size: 18px;
}
sharpen-journey-level sharpen-progress-bar {
  margin-bottom: var(--spacing-md);
}