@layer atoms {
  .mobius-title {
    display: flex;
    padding-left: var(--size-sm);
  }

  .mobius-title__header {
    margin: 0;
    font-size: var(--font-size-small-title);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
  }

  .mobius-title__description {
    margin: 0;
    font-size: var(--font-size-regular);
    color: var(--color-text-medium);
    font-weight: var(--font-weight-normal);
  }

  .mobius-title__container {
    gap: var(--size-xs);
    line-height: var(--line-height-tight);
    position: relative;
    padding-left: calc(var(--size-sm) + var(--title-decorator-width));

    &::before {
      position: absolute;
      content: "";
      display: block;
      width: var(--title-decorator-width);
      height: 100%;
      border-radius: var(--radius-1);
      left: 0;
      background-color: var(--color-primary);
    }
  }
}
