:root {
  --button-background-left: #063;
  --button-background-right: #6c3;
  --button-focus-shadow: #f60;
  --card-background: #fff;
  --card-border: #ddd;
  --code-diff-deleted-background: #fee;
  --code-diff-inserted-background: #efe;
  --code-general-background: #333;
  --code-general-foreground: #fff;
  --code-highlight-class: #66c;
  --code-highlight-dot: #660;
  --code-highlight-function: #669;
  --code-highlight-keyword: #c33;
  --code-highlight-literal: #06c;
  --code-highlight-number: #06c;
  --code-highlight-operator: #06c;
  --code-highlight-string: #036;
  --code-highlight-type: #c33;
  --code-highlight-variable: #060;
  --general-background: #f6f3ff;
  --general-text-dark: #333;
  --general-text-light: #fff;
  --heading-foreground-green: #063;
  --heading-foreground-purple: #606;
  --level-unlocked-background: #333;
  --level-unlocked-foreground: #fff;
  --level-locked-background: #eee;
  --level-locked-foreground: #666;
  --message-border: #ddd;
  --message-computer-background: #fff;
  --message-human-background: #efe;
  --panel-background-left: #606;
  --panel-background-right: #f3c;
  --panel-background-xtra: #fc6;
  --panel-body-background: #fff;
  --separator-shadow: #0003;
  --unittest-new-background: #eef;
  --unittest-old-background: #fff;
}

* {
  border: none;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none !important;
  padding: 0;
}

code {
  &:not(.block) {
    background-color: var(--code-general-background);
    border-radius: 0.25rem;
    color: var(--code-general-foreground);
    padding: 0.1rem 0.25rem;
    white-space: pre;
  }

  &.block {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;

    div {
      white-space: pre;

      &.old {
        background-color: var(--unittest-old-background);
      }

      &.new {
        background-color: var(--unittest-new-background);
      }

      ins {
        background-color: var(--code-diff-inserted-background);
        text-decoration: none;
      }

      del {
        background-color: var(--code-diff-deleted-background);
        text-decoration: none;
      }

      .type {
        color: var(--code-highlight-type);
      }
      
      .keyword {
        color: var(--code-highlight-keyword);
      }

      .class {
        color: var(--code-highlight-class);
      }

      .function {
        color: var(--code-highlight-function);
      }

      .variable {
        color: var(--code-highlight-variable);
      }

      .literal {
        color: var(--code-highlight-literal);
      }

      .number {
        color: var(--code-highlight-number);
      }

      .operator {
        color: var(--code-highlight-operator);
      }

      .string {
        color: var(--code-highlight-string);
      }

      .dot {
        color: var(--code-highlight-dot);
      }
    }
  }
}

ol,
ul {
  list-style-type: none;
}

#messages {
  box-shadow: 0.25rem 0 0.5rem var(--separator-shadow);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  padding-bottom: 2rem;
  scrollbar-width: none;

  section {
    position: relative;
    opacity: 0;

    &:before {
      content: '';
      background-size: contain;
      display: block;
      height: 1.5rem;
      width: 1.5rem;
      position: absolute;
      bottom: 0;
    }

    &.human {
      margin-left: 20%;

      &:before {
        background-image: url('avatar-human.png');
        right: 0.5rem;
      }

      &.reveal {
        animation: revealHuman 0.25s linear forwards;
      }

      >div {
        background-color: var(--message-human-background);
        border-bottom-right-radius: 0;
        color: var(--general-text-dark);
        margin-right: 2.5rem;
      }
    }

    &.computer {
      margin-right: 20%;

      &:before {
        background-image: url('avatar-computer.png');
        left: 0.5rem;
      }

      &.reveal {
        animation: revealComputer 0.25s linear forwards;
      }

      >div {
        background-color: var(--message-computer-background);
        border-bottom-left-radius: 0;
        color: var(--general-text-dark);
        margin-left: 2.5rem;
      }
    }

    &.hidden {
      display: none;
    }

    >div {
      border: 0.1rem solid var(--message-border);
      border-radius: 1.25rem;
      color: var(--general-text-dark);
      display: flow-root;
      margin: 0.75rem;
      overflow: hidden;
      padding: 0 0.75rem;

      code {
        margin: 0.75rem 0;
      }

      ol {
        margin: 0.75rem 0;

        >li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: pre;

          code {
            margin: 0;
          }
        }
      }
    }
  }
}