@import "../variables";
@import "../mixins/overlay-base";

.font-weight-bold {
  font-weight: $ec-font-weight-bold !important;
}

.font-weight-normal {
  font-weight: $ec-font-weight-normal !important;
}

.font-size-small {
  font-size: $ec-font-size-label !important;
}

.font-size-medium {
  font-size: $ec-font-size-body !important;
}

.font-size-base {
  font-size: $ec-font-size-action !important;
}

.font-size-large {
  font-size: $ec-font-size-title !important;
}

.font-color-primary {
  color: $ec-color-text-primary-dark !important;
}

.font-color-primary-light {
  color: $ec-color-text-primary-light !important;
}

.font-color-secondary {
  color: $ec-color-text-secondary-dark !important;
}

.font-color-secondary-light {
  color: $ec-color-text-secondary-light !important;
}

.font-color-muted,
.font-color-hint {
  color: $ec-color-text-hint-dark !important;
}

.font-color-error {
  color: $ec-color-error !important;
}

.font-message {
  @include overlay-message;
}

.font-message-medium {
  @include overlay-message($font-size: $ec-font-size-body);
}

@each $alignment in (left, right, center) {
  .text-#{$alignment} {
    text-align: $alignment !important;
  }
}