$bg-color: #fdf7ce;
$primary: white;
$accent: yellow;
$text-col: #231f20;
$face-col-0: #85de77;
$face-col-1: #fdfd97;
$face-col-2: #feb144;
$face-col-3: #ff6663;
$face-col-4: #ff0000;
$largest-width: "275px";

@import url("https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap");

* {
  box-sizing: border-box;
}

body {
  align-items: center;
  background-color: $bg-color;
  display: flex;
  flex-direction: column;
  font-family: "Sniglet", cursive;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  padding: 0;
  width: 100vw;
}
.col-0 {
  fill: $face-col-0;
}

.col-1 {
  fill: $face-col-1;
}

.col-2 {
  fill: $face-col-2;
}

.col-3 {
  fill: $face-col-3;
}

.col-4 {
  fill: $face-col-4;
}

svg.display {
  width: 100%;
  height: 70px;

  text {
    font-size: 60px;
    letter-spacing: 0px;
    fill: $text-col;
    stroke-linejoin: round;
  }

  tspan.text-primary {
    font-weight: 800;
    stroke: $text-col;
    stroke-width: 5px;
  }
}
.button-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
button#addSquishy {
  border: 0;
  background: white;
  border-radius: 999px;
  font-family: "Sniglet", cursive;
  font-size: 1.5em;
  padding: 1rem 2rem;
  border: 3px solid $text-col;
  box-shadow: 0 5px $text-col;
  transition: 0.2s;
  cursor: pointer;
  color: $text-col;
  &:hover {
    box-shadow: 0 3px $text-col;
    transform: translateY(2px);
  }
  &:active {
    box-shadow: 0 0px $text-col;
    transform: translateY(5px);
  }
}
button#resetSquishies {
  font-family: "Sniglet", cursive;
  color: $text-col;
  border: 0;
  background: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.squishy-container {
  background: linear-gradient($text-col, $text-col) 0 20% / 10% 5px,
    linear-gradient($text-col, $text-col) 100% 20% / 70% 5px,
    linear-gradient($text-col, $text-col) 0 50% / 70% 5px,
    linear-gradient($text-col, $text-col) 100% 50% / 10% 5px,
    linear-gradient($text-col, $text-col) 0 80% / 40% 5px,
    linear-gradient($text-col, $text-col) 100% 80% / 40% 5px;
  background-color: #ba7a45;
  background-repeat: no-repeat;
  border: 5px solid $text-col;
  border-radius: 35px;
  box-shadow: 0 5px $text-col;
  padding: 1rem;
  height: calc(200px + 10px);
  width: 85%;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  resize: horizontal;
  overflow: auto;
}
.squishy {
  transition: 0.3s;
  container-type: inline-size;
  flex: 1 0 auto;
  cursor: pointer;
  height: calc(200px - 2rem);
}

@mixin show-squishy-face($index) {
  @for $i from 0 through 4 {
    @if $i == $index {
      .squishy-face-#{$i} {
        display: block;
      }
    } @else {
      .squishy-face-#{$i} {
        display: none;
      }
    }
  }
}

.squishy-body {
  border-radius: 35px;
  border: 5px solid $text-col;
  box-shadow: 0 3px $text-col;
  height: 100%;
  position: relative;
  //THE CONTAINER QUERY BIT
  background-color: $face-col-4;
  @include show-squishy-face(4);

  @container (min-width: calc(#{$largest-width} / 4)) {
    background-color: $face-col-3;
    @include show-squishy-face(3);
  }

  @container (min-width: calc(#{$largest-width} / 3)) {
    background-color: $face-col-2;
    @include show-squishy-face(2);
  }

  @container (min-width: calc(#{$largest-width} / 2)) {
    background-color: $face-col-1;
    @include show-squishy-face(1);
  }

  @container (min-width: #{$largest-width}) {
    background-color: $face-col-0;
    @include show-squishy-face(0);
  }
}

.squishy-face {
  width: 100%;
  max-width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -8px);

  > svg {
    width: 100%;
    height: auto;
    margin: auto 0;
  }
}

.squishy-body svg {
  [stroke^="#"] {
    stroke: $text-col;
  }

  [fill^="#"] {
    fill: $text-col;
  }
}