.container
  svg.arrow(viewBox="0 0 512 512" width="100" title="arrow-alt-circle-up")
    path(d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm292 116V256h70.9c10.7 0 16.1-13 8.5-20.5L264.5 121.2c-4.7-4.7-12.2-4.7-16.9 0l-115 114.3c-7.6 7.6-2.2 20.5 8.5 20.5H212v116c0 6.6 5.4 12 12 12h64c6.6 0 12-5.4 12-12z")

@layer demo-stuff, container-stuff;

@layer container-stuff {
  *, *:after, *:before  {
    pointer-events: none;
  }
  .container {
    pointer-events: all;
    container-type: size;
  }
  @container (min-height: 200px) {
    .arrow {
      --rotate: 90deg;
    }
  }
  @container (min-height: 300px) {
    .arrow {
      --rotate: 180deg;
    }
  }
  @container (min-height: 400px) {
    .arrow {
      --rotate: 270deg;
    }
  }
  @container (min-height: 500px) {
    .arrow {
      --rotate: 360deg;
    }
  }
}

@layer demo-stuff {
  * {
    box-sizing: border-box;
  }
  body {
    min-height: 100vh;
    display: grid;
    place-items: center;
  }
  .container {
    resize: vertical;
    overflow: hidden;
    max-height: 500px;
    min-height: 100px;
    width: 100px;
    position: relative;
  }
  .container:after {
    content: "";
    background: #89d65c;
    position: absolute;
    height: 24px;
    width: 24px;
    bottom: 0;
    right: 0;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
  }
  .arrow {
    height: 100px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(var(--rotate, 0deg));
    transition: transform 0.25s;
  }
}