@use "../../../styles/abstracts/functions" as fun;

.heading {
  color: var(--color-primary-dark);
  font-family: var(--font-family-secondary);
  letter-spacing: 0.01ex;

  &--regular {
    margin-bottom: 0;
    margin-top: 0;
  }

  &--left {
    text-align: left;
  }

  &--center {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  &--margin {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);

    & + & {
      margin-top: var(--spacing-md);
    }
  }

  &--1 {
    font-size: var(--font-size-3xl);
    font-weight: 500;
  }

  &--2 {
    padding-bottom: fun.convert-px(3);
    background: linear-gradient(
        to top,
        var(--color-primary-dark) 0.3rem,
        transparent 0.3rem
      )
      0 0 / 3rem 100% no-repeat;
    font-size: var(--font-size-2xl);
    font-weight: 500;
    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
  }

  &--3 {
    font-size: var(--font-size-xl);
    font-weight: 500;
  }

  &--4 {
    font-size: var(--font-size-lg);
    font-weight: 500;
  }

  &--5 {
    font-size: var(--font-size-md);
    font-weight: 600;
  }

  &--6 {
    font-size: var(--font-size-md);
    font-weight: 500;
  }
}