.progress-tabs-wrapper {
  display: flex;

  .tab {
    padding: $base-spacing-triple $base-spacing-quad;
    border-bottom: 2px solid $color-light-grey;
    font-size: $text-small;
    color: $color-mid-grey;
    opacity: 0.4;
    font-weight: $font-weight-bold;
    letter-spacing: 0.6px;

    &:hover {
      opacity: 0.5;
      border-bottom: 2px solid $color-mid-grey;
    }

    &.clickable {
      cursor: pointer;
    }

    &.active {
      color: $color-blue;
      opacity: 1;
      border-bottom: 2px solid $color-blue;
    }
  }
}