/* ==========================================================================
 * Text
 * ========================================================================== */

.mds-c-text {
  @mixin mds-m-text;

  --mds-v-text__color: var(--mds-t-text-color--primary);
  --mds-v-text__color--muted: var(--mds-t-text-color--tertiary);

  color: var(--mds-v-text__color);

  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-$(spacing) {
      margin: var(--mds-d-spacing--$(spacing));
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-vertical-$(x-spacing) {
      margin-bottom: var(--mds-d-spacing--$(x-spacing));
      margin-top: var(--mds-d-spacing--$(x-spacing));
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-horizontal-$(y-spacing) {
      margin-left: var(--mds-d-spacing--$(y-spacing));
      margin-right: var(--mds-d-spacing--$(y-spacing));
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-bottom-$(b-spacing) {
      margin-bottom: var(--mds-d-spacing--$(b-spacing));
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-left-$(l-spacing) {
      margin-left: var(--mds-d-spacing--$(l-spacing));
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-top-$(t-spacing) {
      margin-top: var(--mds-d-spacing--$(t-spacing));
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-right-$(r-spacing) {
      margin-right: var(--mds-d-spacing--$(r-spacing));
    }
  }

  &--no-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &--color {
    &-default {
      color: var(--mds-t-text-color--primary);
    }

    &-muted {
      color: var(--mds-t-text-color--tertiary);
    }

    &-info {
      color: var(--mds-t-color--blue);
    }

    &-secondary {
      color: #fff;
    }

    &-success {
      color: var(--mds-t-color--green);
    }

    &-warning {
      color: var(--mds-t-color--orange);
    }

    &-danger {
      color: var(--mds-t-color--red);
    }
  }

  a& {
    &:focus {
      outline: 2px solid var(--mds-d-color-brand--primary);
    }

    &:enter,
    .mds-is-clickable:hover & {
      text-decoration: underline;
    }
  }

  i {
    font-style: italic;
  }

  s {
    text-decoration: line-through;
  }

  small {
    color: var(--mds-v-text__color--muted);
    font-size: 1em;
  }

  strong {
    font-weight: var(--mds-d-font-weight--semibold);
  }

  &.mds-is-complete {
    color: var(--mds-v-text__color--muted);
    font-style: italic;
    font-weight: var(--mds-d-font-weight--normal);
    text-decoration: line-through !important; /* Override hover styles inside mds-is-clickable areas */
  }

  &.mds-has-changes {
    --mds-v-button__background-color: var(--mds-t-background-color--changes-muted);
  }
}