.box {
  --padding: 1rem;
  position: relative;
  max-width: 300px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-gutter: var(--gutter, auto);
  margin: 1rem auto 0;
  background: linear-gradient(
    to right,
    #fff calc(100% - 15px),
    #d98daf 0,
    #d98daf 15px
  );
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: var(--padding);

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 16px solid #d2e7c9;
  }
}

p {
  margin-bottom: 1rem;
}

p.hidden {
  display: none;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.btn {
  appearnce: none;
  border: 0;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid grey;
  border-radius: 100px;
  cursor: pointer;
}

.btn.is-active {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btn--gutter.is-active {
  color: #fff;
  background-color: #db498a;
  border-color: #db498a;
}

.info-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 2rem auto 0;
}

.title {
  font-size: 1.5rem;
  text-align: center;
  font-family: monospace;
  font-weight: bolder;
  margin-bottom: 1rem;
}

.info {
  font-size: 0.85rem;

  &:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
    background-color: #d2e7c9;
    border-radius: 2px;
    margin-right: 0.5em;
    border: 2px solid rgba(#000, 0.05);
  }
}

.info--gutter {
  &:before {
    background-color: #d98daf;
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: "Arial";
  color: #222;
  background-color: #f4f4f4;
  line-height: 1.35;
  padding: 2rem;
}

let addContent = document.querySelector("#addContent");
let addGutter = document.querySelector("#addGutter");
let reset = document.querySelector("#reset");
let content = document.querySelector(".p-2");
let wrapper = document.querySelector(".box");

addContent.addEventListener("click", function () {
  content.classList.remove("hidden");
  this.classList.add("is-active");
});

addGutter.addEventListener("click", function () {
  wrapper.style.setProperty("--gutter", "stable");
  this.classList.add("is-active");

  /*
   * This is a hack/workaround
   * See the bug for details: https://bugs.chromium.org/p/chromium/issues/detail?id=1252492
   * Updated, it's fixed in Chrome Canary.
   */

  resetOverflow();
});

reset.addEventListener("click", function () {
  content.classList.add("hidden");
  wrapper.setAttribute("style", "");
  addContent.classList.remove("is-active");
  addGutter.classList.remove("is-active");
  resetOverflow();
});

function resetOverflow() {
  var timer = setTimeout(function () {
    wrapper.style.overflowY = "visible";

    var timer2 = setTimeout(function () {
      wrapper.style.overflowY = "auto";
    }, 10);
  }, 30);
}