@import '../shared-styles/index';

@mixin headline-typography($size) {
  @include type-style($size);

  @include media-breakpoint-down(small) {
    @include type-style(#{$size}-mobile);
  }
}

:host {
  margin: 0;
  color: v(headline-color);
  ::ng-deep .nx-link,
  ::ng-deep nx-link a,
  a {
    color: v(link-color);
    font-size: inherit !important;
    font-weight: nx-font-weight(semibold);
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none;
  }
}

:host(.nx-heading--page) {
  @include headline-typography('heading-01');
}

:host(.nx-heading--section) {
  @include headline-typography('heading-02');
}

:host(.nx-heading--subsection-large) {
  @include headline-typography('heading-03');
}

:host(.nx-heading--subsection-medium) {
  @include headline-typography('heading-04');
}

:host(.nx-heading--subsection-small) {
  @include headline-typography('heading-05');
}

:host(.nx-heading--subsection-xsmall) {
  @include headline-typography('heading-06');
}

:host(.nx-heading--new-api) {
  &.nx-heading--6xl {
    @include headline-typography('heading-6xl');
  }
  &.nx-heading--5xl {
    @include headline-typography('heading-5xl');
  }
  &.nx-heading--4xl {
    @include headline-typography('heading-00');
  }
  &.nx-heading--3xl {
    @include headline-typography('heading-01');
  }
  &.nx-heading--2xl {
    @include headline-typography('heading-02');
  }
  &.nx-heading--xl {
    @include headline-typography('heading-03');
  }
  &.nx-heading--l {
    @include headline-typography('heading-04');
  }
  &.nx-heading--m {
    @include headline-typography('heading-05');
  }
  &.nx-heading--s {
    @include headline-typography('heading-06');
  }
}
:host(.nx-heading--secondary) {
  color: v(headline-secondary-color);

  ::ng-deep a {
    color: v(headline-secondary-color);
  }
}

:host(.nx-heading--negative) {
  color: v(negative);

  ::ng-deep a {
    color: v(negative);
  }
}

:host(.nx-heading--secondary.nx-heading--negative) {
  color: v(headline-negative-secondary-color);

  ::ng-deep a {
    color: v(headline-negative-secondary-color);
  }
}

:host(.nx-heading--page-bold-caps) {
  @include headline-typography('heading-01');
  font-weight: nx-font-weight(bold);
  text-transform: uppercase;

  @include media-breakpoint-down(small) {
    font-weight: nx-font-weight(bold);
    text-transform: uppercase;
  }
}
