@import './global/global';

.cu-composite-heading {
  display: flex;
  gap: var(--cu-vr0);
  flex-direction: column;
  align-items: var(--cu-composite-heading-align, center);
  text-align: var(--cu-composite-heading-text-align, center);

  .cu-icon {
    order: 1;
    margin: 0;
  }

  &__heading {
    --cu-font-size: var(--cu-ms5);
    order: 3;
    margin: 0;
  }

  &__eyebrow-heading {
    --cu-font-size: 12px !important;
    --cu-font-weight: 700;
    --cu-line-height: 1 !important;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    order: 2;
    margin: 0;
    // This effectively narrows the flex row gap below this item.
    margin-bottom: calc(var(--cu-vr-1) * -1);
  }

  &__body {
    order: 4;
    margin: 0;

    p:last-of-type {
      margin: 0;
    }
  }

  &__link {
    font-weight: bold;
    font-size: var(--cu-ms-1);
    order: 5;
    margin: 0 !important;
  }

  &::after {
    content: '';
    display: var(--cu-composite-heading-accent-display, block);
    width: 100px;
    height: 8px;
    background: var(--cu-colorscheme-accent);
    order: 6;
    margin: 0;
  }

  &--minimal::after {
    display: none;
  }

  // Variations
  &--left {
    --cu-composite-heading-align: flex-start;
    --cu-composite-heading-text-align: left;

    &::after {
      order: 3;
      margin: 0;
    }
  }

  &--bold {
    .cu-composite-heading__heading {
      --cu-font-family: 'futura-pt';
      --cu-font-size: var(--cu-ms4);
      text-transform: uppercase;
      word-wrap: anywhere;

      @include breakpoint(sm) {
        --cu-font-size: var(--cu-ms6);
        word-wrap: normal;
      }

      @include breakpoint(md) {
        --cu-font-size: var(--cu-ms7);
      }
    }
  }
}