@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/font-weight';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/border-radius';
@use '../../mixins/ms';
@use '../../mixins/spacing';
@use '../../mixins/theme';
@use '../../mixins/unit';
@use 'sass:math';

@include theme.props {
  --theme-blend-mode-background: multiply;
}

@include theme.props(dark) {
  --theme-blend-mode-background: hard-light;
}

/**
 * 1. This grid layout creates 3 rows. The content takes up the last row,
 *    and the features span the first two rows.
 * 2. A pseudo-element is positioned behind the features covering the first row
 * 3. To give the illustion that the page bg color extends behind the features.
 */
.c-ground-nav {
  background-color: var(--theme-color-background-base);
  display: grid; // 1
  grid-template-rows: repeat(3, minmax(0, auto)); // 1

  &::before {
    background-color: var(--theme-color-background-secondary); // 3
    content: '';
    grid-column: 1; // 2
    grid-row: 2 / span 2; // 2
  }

  .c-ground-nav__content {
    background-color: var(--theme-color-background-secondary);
  }
}

/**
 * Alternate modifier uses background-secondary for use cases where
 * the previous block uses background-base.
 */
.c-ground-nav--alternate {
  background-color: var(--theme-color-background-secondary);

  &::before {
    background-color: var(--theme-color-background-base);
  }

  .c-ground-nav__content {
    background-color: var(--theme-color-background-base);
  }
}

.c-ground-nav__features {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/**
 * 1. Keep contents from overflowing border-radius
 * 2. Constrain the width when there's only one feature
 * 3. Positions multiple features side-by-side. `auto-fit` means this
 *    works even when there's only one feature.
 */
.c-ground-nav__features-inner {
  @include border-radius.conditional;
  contain: paint; // 1
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  margin-inline: auto;

  .c-ground-nav--single-feature & {
    max-inline-size: calc(
      #{size.$max-width-prose} + #{spacing.$fluid-spacing-inline} * 2
    ); // 2
  }

  @media (width >= breakpoint.$l) {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); // 3
  }
}

/**
 * 1. If there's only one feature, center it and match the width of
 *    `fill-pad` containers in the prose width content above.
 * 2. Flex layout to keep both features' form elements vertically aligned
 * 3. Features should take up an equal amount of the layout
 */
.c-ground-nav__feature {
  @include spacing.fluid-padding-block;
  @include spacing.fluid-padding-inline;
  inline-size: 100%;

  &:only-child {
    margin-inline: auto; // 1

    @media (width >= breakpoint.$l) {
      min-inline-size: calc(
        #{size.$max-width-prose} + #{spacing.$fluid-spacing-inline} * 2
      ); // 1
    }
  }

  @media (width >= breakpoint.$l) {
    display: flex; // 2
    flex: 1; // 3
  }
}

/**
 * 1. Apply grid layout to keep feature actions aligned to the bottom
 */
.c-ground-nav__feature-inner {
  display: grid; // 1
  grid-template-rows: minmax(0, 1fr) minmax(0, auto); // 1
  inline-size: 100%;
}

/**
 * 1. Background blend mode is set to keep the illustration working on all colors
 * 2. Illustration size scales on small screens, up to a max width
 * 3. Align illustration to the right edge of the container or viewport
 */
.c-ground-nav__content {
  --theme-color-text-emphasis: var(--theme-color-text-muted);
  background-blend-mode: var(--theme-blend-mode-background); // 1
  background-image: svg-load('illustrations/portland.svg');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto clamp(ms.step(6), 15vw, ms.step(9)); // 2
  color: var(--theme-color-text-muted);
  grid-column: 1;
  grid-row: 3;

  @media (width >= breakpoint.$xxl) {
    background-size: auto ms.step(10); // 2
  }

  @media (width >= breakpoint.$xxxl) {
    $size-half-spread: math.div(size.$max-width-spread, 2);
    $size-inline-spacing: spacing.$fluid-spacing-inline-max;
    $right-container: calc(
      50vw - #{$size-half-spread} - #{$size-inline-spacing}
    );
    background-position: right #{$right-container} bottom; // 3
  }
}

.c-ground-nav__content-inner {
  column-gap: spacing.$fluid-gap;
  display: grid;
  grid-template-areas:
    'address'
    'menu'
    'topics'
    'social'
    'legal';
  grid-template-columns: minmax(0, 1fr);
  row-gap: ms.step(2);

  // XS Only: Reserve a bit of space for the illustration
  @media (width < breakpoint.$s) {
    padding-block-end: ms.step(6);
  }

  // S: Pop the menus side by side
  @media (width >= breakpoint.$s) {
    grid-template-areas:
      'address address'
      'menu topics'
      'social social'
      'legal legal';
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  }

  // M: Switch to a horizontal layout
  @media (width >= breakpoint.$m) {
    grid-template-areas:
      'address menu topics'
      'social menu topics'
      'legal legal legal';
    grid-template-columns: repeat(2, minmax(0, auto)) minmax(0, 1fr);
  }

  // XL: Now we have space to pop the social icons to the right
  @media (width >= breakpoint.$xl) {
    grid-template-areas:
      'address menu topics social'
      'legal menu topics .';
    grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr);
  }

  // XXL: Add a bit more breathing room between items
  @media (width >= breakpoint.$xxl) {
    // prettier-ignore
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, auto)) minmax(0, 1fr);
  }

  // XXXL: Allow generous breathing room between items
  @media (width >= breakpoint.$xxxl) {
    // prettier-ignore
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 2fr);
  }
}

.c-ground-nav__address {
  grid-area: address;
}

/**
 * 1. Add a bit of space between street address and email
 */
.c-ground-nav__address-section {
  @media (width >= breakpoint.$m) {
    display: inline-block; // 1
    margin-block-start: ms.step(2); // 1
  }
}

.c-ground-nav__menu {
  grid-area: menu;
}

.c-ground-nav__topics {
  grid-area: topics;
}

/**
 * 1. Bottom-align to align with last menu items
 * 2. Reposition in top-right corner
 */
.c-ground-nav__social {
  align-self: end; // 1
  grid-area: social;

  @media (width >= breakpoint.$xl) {
    align-self: start; // 2
    justify-self: end; // 2
  }
}

.c-ground-nav__social-icon {
  --icon-size: #{size.$icon-medium};

  @media (width >= breakpoint.$xl) {
    --icon-size: #{size.$icon-large};
  }
}

/**
 * 1. Bottom-align to align with last menu items
 * 2. Gives a little breathing room to the illustration
 */
.c-ground-nav__legal {
  align-self: end; // 1
  grid-area: legal;

  @media (breakpoint.$xl > width >= breakpoint.$m) {
    margin-block-start: ms.step(2); // 2
  }
}