@use "../tag/mixins" as *;
@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;

@mixin hero-external {
  @include reset;

  .#{$prefix}--hero-ext {
    background-size: cover;
    padding: $spacing-12 $spacing-07;

    @include breakpoint-down(lg) {
      padding: $spacing-10 $spacing-07;
    }

    @include breakpoint-down(md) {
      padding: $spacing-09 $spacing-03;
    }
  }

  // [1] TODO: Create new type-style token for the Hero heading
  .#{$prefix}--hero-ext__heading {
    color: $text-inverse-default;
    font-size: 48px; // [1]
    font-weight: 800; // [1]
    line-height: 1.15; // [1]
    text-align: center;
    text-transform: uppercase; // [1]

    @include breakpoint-down(lg) {
      font-size: 36px; // [1]

      & > br {
        display: none;
      }
    }

    @include breakpoint-down(md) {
      font-size: 30px; // [1]
      text-align: left;
    }
  }

  .#{$prefix}--hero-ext__body-copy {
    color: $text-inverse-default;
    margin-top: $spacing-05;
    text-align: center;

    @include breakpoint-down(md) {
      text-align: left;
    }

    & > b,
    strong {
      font-weight: 700;
    }

    & > a {
      color: $text-inverse-default;
      cursor: pointer;
      text-decoration: underline;
    }
  }

  .#{$prefix}--hero-ext__actions {
    align-items: center;
    display: flex;
    gap: $spacing-07;
    justify-content: center;
    margin-top: $spacing-07;

    @include breakpoint-down(lg) {
      gap: $spacing-06;
    }

    @include breakpoint-down(md) {
      gap: $spacing-05;
      justify-content: flex-start;
    }
  }
}