div {
  border: 1px solid #888;
  display: block;
  margin: 0 0 1em 0;
  padding: 0 1em 0 0;
  &.collapsed {
    margin-bottom: 0;
  }
}

.arrow_box {
  position: relative;
  transition: border ease-in-out 200ms;

  &:after, &:before {
    border: solid transparent;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
    width: 0;
  }

  &:after {
    border-top-color: #222;
    border-width: 1em;
    margin-left: -1em;
  }

  &:before {
    border-top-color: #888;
    border-width: calc(1em + 1px);
    margin-left: calc(-1em - 1px);
  }

  &:has(>textarea:focus, >textarea:hover) {
    &:after {
      border-top-color: #333;
    }

    &:before {
      border-top-color: #bbb;
    }
  }

  &:hover {
    border-color: #bbb;
  }
}

textarea {
  background-color: #222;
  border: none;
  color: #ddd;
  font-family: "Liberation Mono", monospace;
  height: 10em;
  margin: 0;
  padding: 0.5em;
  resize: vertical;
  transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
  width: 100%;

  .collapsed & {
    height: 1.5em;
    padding: 0;
    color: #888;
    text-align: center;
    transition: all ease-in-out 200ms;
  }

  &:focus, &:hover {
    background-color: #333;
    border-color: #bbb;
    color: #fff;
  }
}