// ============================================================================
// :: Budget
// ============================================================================
/**
 * A small component that only contains a unit and a value, they both differentiate
 * in font weight to emphasize focus.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-budget {
  display: inline-flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-budget__wrapper {
  display: inline-flex;
  align-items: center;
}

.a-budget__unit,
.a-budget__amount {
  font-family: $font-family-sora;
  line-height: $line-height-normalize;
  font-weight: $font-weight-bold;
}

.a-budget__unit {
  margin-right: 0.5rem;
}

.a-budget__text {
  font-family: $font-family-sora;
  color: $text-color-disabled;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-budget--2x-large {
  .a-budget__unit,
  .a-budget__amount {
    font-family: $font-family-sora;
    font-size: $font-size-5x-large;

    @include respond-at($breakpoint-tablet-default) {
      font-size: $font-size-6x-large;
    }
  }
}

.a-budget--1x-large {
  @extend %__h3-default;
}

.a-budget--small {
  .a-budget__unit,
  .a-budget__amount {
    font-size: $font-size-1x-small;
    line-height: $line-height-1x-small;
  }
}

.a-budget--center {
  width: 100%;
  justify-content: center;
}

// ============================================================================
// :: States
// ============================================================================
.a-budget {
  &.is-positive {
    color: $primary-color-base;
  }

  &.is-negative {
    color: $text-color-base;
  }
}