.console-resizable {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
}

.console {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--console-bg-color);
  overflow: auto;
  direction: column;
  font-family: monospace;
  padding: 0 1rem 1rem 3rem;
  border-top-width: 0.3rem;
  border-color: var(--resizeable-handle-border-color);

  .console-info-color {
    color: var(--error-level-info);
  }

  .console-warning-color {
    color: var(--error-level-warning);
  }

  .console-error-color {
    color: var(--status-bad-color);
  }

  .console-entry {
    display: flex;
    column-gap: 0.5rem;

    .console-timestamp {
      font-weight: semibold;
    }

    .console-message {
      word-break: break-all;
    }
  }
}

.console-toggle-icon-button {
  background: var(--console-icon-button-bg-color) !important;
  position: fixed !important;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 21;

  &:hover {
    background: var(--console-icon-button-bg-color-hover) !important;
  }

  &[data-error-seen='true'] {
    background: var(--status-bad-color) !important;
    &:hover {
      background: var(--status-bad-color) !important;
    }
  }
}

.console-autoscroll-icon-button {
  background: var(--console-icon-button-bg-color) !important;
  position: fixed !important;
  left: 0.5rem;
  bottom: 3rem;
  z-index: 21;

  &:hover {
    background: var(--console-icon-button-bg-color-hover) !important;
  }

  &[data-autoscroll-enabled='true'] {
    background: var(--accent-color) !important;
    &:hover {
      background: var(--accent-color-hover) !important;
    }
  }
}