Chatbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 300;
  pointer-events: none;

  .backdrop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(black, 0.4);
    transition: all 0.4s ease-out;
    pointer-events: all;
  }

  .chatbox {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 450px;
    padding: 16px;
    z-index: 350;
    background-color: rgba(black, 0);
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    font-family: Verdana;
    font-size: 18px;
    transition: all 0.1s ease-out;

    .chat {
      flex-grow: 1;
      flex-direction: column;
      overflow: scroll;
      gap: 4px;
      pointer-events: none;
      max-height: 480px;

      chatentry {
        opacity: 1;
        transition: all 0.1s ease-out;
        left: 0px;

        &.fade {
          opacity: 0;
        }

        &:intro {
          left: 8px;
        }
      }
    }

    textentry {
      opacity: 1;
      color: white;
      font-size: 20px;
      flex-shrink: 0;
      background-color: rgba(black, 0.2);
      transition: all 0.1s ease-out;
      pointer-events: all;

      .placeholder {
        color: rgba(white, 1);
      }

      &:hover {
        background-color: rgba(black, 0.5);
      }
    }
  }

  &.open {
    .chat {
      pointer-events: all;

      chatentry {
        &.fade {
          opacity: 1;
        }
      }
    }

    textentry {
      background-color: rgba(black, 0.6);
    }

    .backdrop {
      opacity: 1;
    }
  }
}