.Root {
  display: block;
  font-family: var(--font-family);
  line-height: 1;
  margin-block-start: 0;
  margin-block-end: 0;
  transition: color var(--speed-turbo) var(--easing-base);
  white-space: pre;

  &.is-inline {
    display: inline;
  }

  &.is-size-small {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
  }

  &.is-size-default {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
  }

  &.is-size-medium {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
  }

  &.is-size-big {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
  }

  &.is-variant {
    &-default {
      color: var(--theme-color-fg-default);
    }

    &-default-contrast {
      color: var(--theme-color-fg-default-contrast);
    }

    &-proud {
      color: var(--theme-color-fg-highlight);
    }

    &-shy {
      color: var(--theme-color-fg-muted);
    }

    &-secondary {
      color: var(--theme-color-secondary-as-fg);
    }

    &-success {
      color: var(--theme-color-success);
    }

    &-notice {
      color: var(--theme-color-notice);
    }

    &-danger {
      color: var(--theme-color-danger);
    }
  }

  &.has-bottom-spacing {
    &-small {
      padding-bottom: 4px;
    }

    &-default {
      padding-bottom: 8px;
    }

    &-large {
      padding-bottom: 16px;
    }
  }

  &.has-top-spacing {
    &-small {
      padding-top: 4px;
    }

    &-default {
      padding-top: 8px;
    }

    &-large {
      padding-top: 16px;
    }
  }

  &.has-left-spacing {
    &-small {
      padding-left: 4px;
    }

    &-default {
      padding-left: 8px;
    }

    &-large {
      padding-left: 16px;
    }
  }

  &.has-right-spacing {
    &-small {
      padding-right: 4px;
    }

    &-default {
      padding-right: 8px;
    }

    &-large {
      padding-right: 16px;
    }
  }

  &.has-text-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }
}
