/* nicht cool https://projects.loom.de/issues/43213 */

.moodie--topic:not(.moodie--frosting) {
  background-color: var(--background);
}

.moodie__graphic {
  position: absolute;
  right: -2px;
  top: 0;
} 

.moodie--frosting {
  overflow: hidden;
}

.moodie--frosting .moodie__inner {
  position: relative;
}

.moodie--frosting .moodie__graphic {
  top: -20%;
}

.moodie--frosting .moodie__content {
  color: white;
}

.moodie--topic:not(.moodie--frosting) .moodie__graphic::before {
  content: '';
  height: 750px;
  width: 100%;
  background-color: var(--graphic-color);
  position: absolute;
  inset: 0 0 auto auto;
}

.moodie--base .moodie__graphic::before {
  clip-path: path('M687.999 253.356V1039.55C576.696 1030.93 477.283 999.33 376.554 941.19C44.7602 749.769 -86.0572 344.075 58.0747 0H248.901L687.999 253.356Z');
}

.moodie--filling .moodie__graphic::before {
  clip-path: path('M187.213 0H0.0618523L0.0614515 1.5L0 728.595L611 1081.36V290.884C510.804 150.992 363.837 46.9112 192.949 1.5C191.04 0.992667 189.128 0.492656 187.213 0Z');
}

.moodie--coating .moodie__graphic::before {
  clip-path: path('M624.888 760.571L0 135.348C53.4819 81.9525 112.098 36.8368 174.258 0H871.84V694.4L624.888 760.571Z');
}

@media (min-width: 651px) and (max-width: 1024px) {
  .moodie--topic:not(.moodie--frosting) {
    min-height: 530px;
  }

  .moodie--topic .moodie__content {
    max-width: 80%;
  }

  .moodie--frosting .moodie__graphic {
    right: 10%;
  }

  .moodie--topic:not(.moodie--frosting) .moodie__graphic {
    transform: scale(.5) translate(50%, -50%);
  }

  .moodie__graphic::before {
    height: 100%;
  }
}

@media (max-width: 650px) {
  .moodie--topic:not(.moodie--frosting) {
    min-height: 380px;
  }

  .moodie--topic:not(.moodie--frosting) .moodie__graphic {
    transform: scale(.35) translate(93%, -93%);
  }

  .moodie__graphic::before {
    height: 100%;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .moodie--topic:not(.moodie--frosting) .moodie__graphic {
    max-width: 45%;
  }

  .moodie--frosting .moodie__graphic {
    right: 20%;
  }
}

@media (min-width: 1025px) {
  .moodie--topic:not(.moodie--frosting) {
    height: 750px;
  }
}

@media (min-width: 1440px) {
  .moodie--topic .moodie__content {
    max-width: 50%;
  }

  .moodie--frosting .moodie__graphic {
    left: 0;
  }
}