:root {
  --honeypot-overlay-height: 30rem;
  --honeypot-padding-inline: var(--inner-container-padding);
  --honeypot-fadeout-color: 0, 0%, 100%;
}

.honeypot__break-out {
  margin-block-start: calc((var(--honeypot-overlay-height) * -1) + 5rem);
  padding-block-start: var(--honeypot-overlay-height);
  position: relative;

  &::before {
    background-image: linear-gradient(to bottom,
    hsla(var(--honeypot-fadeout-color), 0) 0%,
    hsla(var(--honeypot-fadeout-color), 0.013) 8.1%,
    hsla(var(--honeypot-fadeout-color), 0.049) 15.5%,
    hsla(var(--honeypot-fadeout-color), 0.104) 22.5%,
    hsla(var(--honeypot-fadeout-color), 0.175) 29%,
    hsla(var(--honeypot-fadeout-color), 0.259) 35.3%,
    hsla(var(--honeypot-fadeout-color), 0.352) 41.2%,
    hsla(var(--honeypot-fadeout-color), 0.45) 47.1%,
    hsla(var(--honeypot-fadeout-color), 0.55) 52.9%,
    hsla(var(--honeypot-fadeout-color), 0.648) 58.8%,
    hsla(var(--honeypot-fadeout-color), 0.741) 64.7%,
    hsla(var(--honeypot-fadeout-color), 0.825) 71%,
    hsla(var(--honeypot-fadeout-color), 0.896) 77.5%,
    hsla(var(--honeypot-fadeout-color), 0.951) 84.5%,
    hsla(var(--honeypot-fadeout-color), 0.987) 91.9%,
    hsl(var(--honeypot-fadeout-color)) 100%);
    block-size: var(--honeypot-overlay-height);
    content: '';
    inset-block-start: 0;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
  }

  @include use-break-out();
}

.honeypot__inner {
  background-color: hsl(var(--honeypot-fadeout-color));

  @include use-container($start-breakpoint: m);
}

.honeypot__message {
  background-color: var(--color-orange-light);
  padding-block: 4rem 3rem;
  padding-inline: var(--honeypot-padding-inline);
  position: relative;
  text-align: center;

  &::after {
    block-size: 0;
    border-block-start: 1.5rem solid var(--color-orange-light);
    border-inline-end: 1.5rem solid transparent;
    border-inline-start: 1.5rem solid transparent;
    content: '';
    inline-size: 0;
    inset-block-end: 0;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, 100%);
  }
}

.honeypot__icon {
  color: var(--color-orange);
  font-size: 7rem;
  inset-block-start: 0;
  inset-inline-start: 50%;
  position: absolute;
  transform: translate(-50%, -70%) rotate(15deg);
}

.honeypot__nudging-box {
  --nudging-box-padding-inline: var(--honeypot-padding-inline);
}

.honeypot__message,
.honeypot__nudging-box {
  margin-inline: auto;

  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 8),
    xl: column-width(xl, 8),
  ));
}