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

// Text styles
.text-title-1 {
  @include text-title-1;
}

.text-title-2 {
  @include text-title-2;
}

.text-heading-1 {
  @include text-heading-1;
}

.text-heading-2 {
  @include text-heading-2;
}

.text-heading-3 {
  @include text-heading-3;
}

.text-body-1 {
  @include text-body-1;
}

.text-body-2 {
  @include text-body-2;
}

.text-caption-1 {
  @include text-caption-1;
}

.text-caption-2 {
  @include text-caption-2;
}

.text-display-1 {
  @include text-display-1;
}

.text-link {
  @include text-link;
}

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

// Font property utilities
.font-weight-bold {
  font-weight: var(--ec-font-weight-bold) !important;
}

.font-weight-normal {
  font-weight: var(--ec-font-weight-normal) !important;
}

.font-size-small {
  font-size: var(--ec-font-size-label) !important;
}

.font-size-medium {
  font-size: var(--ec-font-size-body) !important;
}

.font-size-base {
  font-size: var(--ec-font-size) !important;
}

.font-size-large {
  font-size: var(--ec-font-size-title) !important;
}

.font-color-primary {
  color: var(--ec-color-primary-dark) !important;
}

.font-color-primary-light {
  color: var(--ec-color-primary-light) !important;
}

.font-color-secondary {
  color: var(--ec-color-secondary-dark) !important;
}

.font-color-secondary-light {
  color: var(--ec-color-secondary-light) !important;
}

// font-color-muted is deprecated, use .font-color-hint instead
.font-color-muted,
.font-color-hint {
  color: var(--ec-color-hint-dark) !important;
}

// @deprecated, use .text-link instead.
.font-color-link {
  color: var(--ec-color-link) !important;
}

.font-color-error {
  color: var(--ec-color-danger) !important;
}

.font-color-success {
  color: var(--ec-color-success) !important;
}

.font-color-interactive {
  color: var(--ec-color-interactive) !important;
}

// @deprecated use .text-display-1 instead
.font-message {
  @include overlay-message;
}

// @deprecated use .text-display-1 instead
.font-message-medium {
  @include overlay-message($font-size: var(--ec-font-size-body));
}

.text-truncate {
  @include truncate();
}

.text-break-all {
  word-break: break-all;
}

.text-wrap {
  white-space: normal;
}
