.progress-button {
  align-items: center;
  background-color: var(--progress-button-background-color, var(--color-white));
  border-color: var(--progress-button-border-color, var(--color-orange));
  border-style: var(--progress-button-border-style, solid);
  border-width: var(--progress-button-border-width, 4px);
  color: var(--progress-button-color, var(--color-midnight));
  display: inline-flex;
  flex-direction: column;
  inline-size: var(--progress-button-width, auto);
  justify-content: center;
  padding-block: var(--_progress-button-padding-inline, 2rem);
  padding-inline: var(--_progress-button-padding-inline, 3.2rem);
  position: relative;
  row-gap: var(--progress-button-row-gap, 0.5rem);
  transition-duration: var(--duration-fast);
  transition-property: background-color, border-color, text-decoration-color;
  user-select: none;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus), .button--active),
  .has-button:is(:hover, :focus-within) &:not([disabled]) {
    --underline-color: currentColor;
    --underline-height: 2px;
    --_progress-button-progress-opacity: 0;

    border-color: var(--progress-button-border-color--engaged, var(--color-orange));
    color: var(--progress-button-color--engaged, var(--color-midnight));
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.progress-button__progress {
  background-color: var(--progress-button-background-color--engaged, var(--color-orange));
  inset-block: 0;
  inset-inline: -1px;
  opacity: var(--_progress-button-progress-opacity, 1);
  position: absolute;
  transform: scale(var(--_progress-button-progress-scale, var(--progress-button-progress, 0%)), 1);
  transform-origin: 0 0;
  transition-property: opacity;
  z-index: 1;
}

.progress-button__text {
  font-size: var(--progress-button-text-font-size, 1.6rem);
  font-weight: var(--progress-button-text-font-weight, var(--font-weight-bold));
  line-height: var(--progress-button-text-line-height, 1.2);
  position: relative;
  z-index: 2;
}

.progress-button__label {
  font-size: var(--progress-button-label-font-size, 1.4rem);
  font-weight: var(--progress-button-label-font-weight, var(--font-weight-regular));
  line-height: var(--progress-button-label-line-height, 1.2);
  position: relative;
  z-index: 2;
}