:host {
  display: block;
  border: none;
  margin: 0 0 1em 0;
  padding: 0 1em 0 0;
  position: relative;

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

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

textarea {
  background-color: #eee;
  border: none;
  color: #111;
  font-family: "Liberation Mono", monospace;
  height: 10em;
  margin: 0;
  padding: 0.5em;
  resize: vertical;
  width: 100%;

  &:focus, &:hover {
    background-color: #fff;
    color: #000;
  }

  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
}