// Styles for landing pages.
//
// Customizations.
// On wider screens (width > $wrapper-content-max-width) if you have a component with a
// full-bleed background use --alter-background-color to set it.

@use 'sass:math';

.wrapper {
  $this: #{&};

  height: auto;
  margin: math.div($wrapper-block-spacing-m, 2) auto;
  width: 100%;
  max-width: $wrapper-content-max-width;

  @supports (margin: clamp(1px, 1vw, 2px)) {
    margin: calc(#{$wrapper-block-spacing-r} / 2) auto;
  }

  &--padding {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: math.div($wrapper-block-spacing-m, 2);
    padding-top: math.div($wrapper-block-spacing-m, 2);

    @supports (padding: clamp(1px, 1vw, 2px)) {
      padding-bottom: calc(#{$wrapper-block-spacing-r} / 2);
      padding-top: calc(#{$wrapper-block-spacing-r} / 2);
    }
  }

  &--padded {
    padding-left: $wrapper-inline-spacing-m;
    padding-right: $wrapper-inline-spacing-m;

    @supports (margin: clamp(1px, 1vw, 2px)) {
      padding-left: $wrapper-inline-spacing-r;
      padding-right: $wrapper-inline-spacing-r;
    }
  }

  &__contained > * {
    margin-inline: auto;
    max-width: $wrapper-max-width;
  }

  &--rhythm > *:not(:last-child) {
    margin-bottom: $wrapper-block-spacing-m;

    @supports (margin: clamp(1px, 1vw, 2px)) {
      margin-bottom: $wrapper-block-spacing-r;
    }
  }

  &--full-height {
    height: 100%;
  }

  &--full-top {
    margin-top: $wrapper-block-spacing-m;

    @supports (margin: clamp(1px, 1vw, 2px)) {
      margin-top: $wrapper-block-spacing-r;
    }

    &#{$this}--padding {
      margin-top: 0;
      padding-top: $wrapper-block-spacing-m;

      @supports (padding: clamp(1px, 1vw, 2px)) {
        margin-top: 0;
        padding-top: $wrapper-block-spacing-r;
      }
    }
  }

  &--full-bottom {
    margin-bottom: $wrapper-block-spacing-m;

    @supports (margin: clamp(1px, 1vw, 2px)) {
      margin-bottom: $wrapper-block-spacing-r;
    }

    &#{$this}--padding {
      margin-bottom: 0;
      padding-bottom: $wrapper-block-spacing-m;

      @supports (padding: clamp(1px, 1vw, 2px)) {
        margin-bottom: 0;
        padding-bottom: $wrapper-block-spacing-r;
      }
    }
  }

  &--bumper-top {
    margin-top: $wrapper-bumper-m + math.div($wrapper-block-spacing-m, 2);

    @supports (margin: clamp(1px, 1vw, 2px)) {
      margin-top: calc(#{$wrapper-bumper-r} + #{$wrapper-block-spacing-r} / 2);
    }

    &#{$this}--padding {
      margin-top: 0;
      padding-top: $wrapper-bumper-m + math.div($wrapper-block-spacing-m, 2);

      @supports (padding: clamp(1px, 1vw, 2px)) {
        margin-top: 0;
        padding-top: calc(
          #{$wrapper-bumper-r} + #{$wrapper-block-spacing-r} / 2
        );
      }
    }
  }

  &--bumper-bottom {
    margin-bottom: $wrapper-bumper-m + math.div($wrapper-block-spacing-m, 2);

    @supports (margin: clamp(1px, 1vw, 2px)) {
      margin-bottom: calc(
        #{$wrapper-bumper-r} + #{$wrapper-block-spacing-r} / 2
      );
    }

    &#{$this}--padding {
      margin-bottom: 0;
      padding-bottom: $wrapper-bumper-m + math.div($wrapper-block-spacing-m, 2);

      @supports (padding: clamp(1px, 1vw, 2px)) {
        margin-bottom: 0;
        padding-bottom: calc(
          #{$wrapper-bumper-r} + #{$wrapper-block-spacing-r} / 2
        );
      }
    }
  }

  &--no-bottom {
    margin-bottom: 0;

    &#{$this}--padding {
      padding-bottom: 0;
    }
  }

  &--no-top {
    margin-top: 0;

    &#{$this}--padding {
      padding-top: 0;
    }
  }

  &--no-spacing {
    margin-bottom: 0;
    margin-top: 0;

    &#{$this}--padding {
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  &--full-bleed {
    max-width: 100%;
  }

  &--hidden-x {
    overflow-x: hidden;
  }

  &__background {
    background-color: var(--grey-100);
    overflow: hidden;

    .cta--link {
      color: var(--blue-700);

      &:visited {
        color: var(--purple-900);
      }

      &:hover,
      &:focus {
        color: var(--blue-900);
      }
    }

    &--light {
      background-color: var(--grey-50);
    }

    &--dark {
      background-color: var(--grey-850);
    }

    &--blue {
      background-color: var(--secondary-blue);
    }

    &--color-stop {
      background: var(--secondary-blue);
      position: relative;

      &::after {
        $stop-pos-s: calc(100% - 300px);
        $stop-pos-l: 50%;
        background-image: linear-gradient(
          335deg,
          var(--white),
          var(--white) $stop-pos-s,
          transparent $stop-pos-s,
          transparent
        );
        bottom: 0;
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        width: 100%;

        @include mq(631px) {
          background-image: linear-gradient(
            to top left,
            var(--white),
            var(--white) $stop-pos-l,
            transparent $stop-pos-l,
            transparent
          );
          height: math.percentage(math.div(450, 772));
        }
      }
    }

    [data-theme='dark'] & {
      .cta--link {
        &:hover,
        &:focus {
          color: var(--phosphor-gray);
        }
      }

      &--dark {
        background-color: var(--phosphor-gray);
      }

      &--blue {
        background-color: var(--phosphor-gray);
      }

      &--color-stop {
        background: var(--phosphor-gray);

        &::after {
          background-image: none;

          @include mq(631px) {
            background-image: none;
          }
        }
      }
    }
  }

  &__responsive-circle {
    $circle-s: 100px;
    $circle-l: 150px;
    $circle-m: math.div(($circle-l + $circle-s), 2);

    $medium: math.div(
      $circle-m,
      (math.div(math.div($circle-l, $wrapper-scaler), 100vw))
    );

    --circle-radius: #{$circle-s};
    --circle-offset: -50;

    @include mq($medium) {
      --circle-radius: #{$circle-m};
    }

    @include mq($wrapper-max-width) {
      --circle-radius: #{$circle-l};
      --circle-offset: 0;
    }
  }

  &__green-circle {
    --shape-color: var(--green-500);
  }

  &__yellow-circle {
    --shape-color: var(--yellow-500);
  }

  &--full-circles {
    --circle-type: full-circles;
    --shape-color: var(--blue-600), var(--yellow-500);
    background-image: paint(circles);
    height: 100%;
  }

  &--bottom-bleed {
    position: relative;
    z-index: 1;
  }
}
