// ============================================================================
// :: Root
// ============================================================================
/**
 * Small component that contains the same styling as a label from an input
 * field but can be used independantly from the input field.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-label {
  display: block;

  margin-bottom: 1rem;

  font-family: $font-family-sora;
  font-weight: $font-weight-bold;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  color: $text-color-base;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}