/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

* {
  box-sizing: border-box;
}

:root {
  --bb-grid-size: 4px;
  --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
  --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
  --bb-grid-size-4: calc(var(--bb-grid-size) * 4);
  --bb-grid-size-5: calc(var(--bb-grid-size) * 5);
  --bb-grid-size-6: calc(var(--bb-grid-size) * 6);
  --bb-grid-size-7: calc(var(--bb-grid-size) * 7);
  --bb-grid-size-8: calc(var(--bb-grid-size) * 8);
  --bb-grid-size-9: calc(var(--bb-grid-size) * 9);
  --bb-grid-size-10: calc(var(--bb-grid-size) * 10);
  --bb-grid-size-11: calc(var(--bb-grid-size) * 11);
  --bb-grid-size-12: calc(var(--bb-grid-size) * 12);
  --bb-grid-size-13: calc(var(--bb-grid-size) * 13);
  --bb-grid-size-14: calc(var(--bb-grid-size) * 14);
  --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
  --bb-grid-size-16: calc(var(--bb-grid-size) * 16);

  --bb-selected-color: rgb(46, 139, 232);
  --bb-continue-color: #c0dfff;
  --bb-font-family-header: "Fira Code";
  --bb-font-family-mono: "Fira Code", "Courier New", Courier, monospace;
  --bb-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bb-font-color: rgb(23, 23, 23);
  --bb-font-color-faded: rgb(59, 59, 59);
  --bb-warning-color: rgb(251, 137, 3);
  --bb-error-color: rgb(251, 3, 3);
  --bb-output-color: rgb(51, 235, 168);
  --bb-done-color: rgb(3, 190, 122);
  --bb-text-default: 1rem;
  --bb-text-medium: 0.875rem;
  --bb-text-small: 0.75rem;
  --bb-text-nano: 0.7rem;
  --bb-text-pico: 0.65rem;
  --bb-easing: cubic-bezier(0, 0, 0.3, 1);
  --bb-easing-duration-in: 0.15s;
  --bb-easing-duration-out: 0.3s;

  --bb-icon-add: url(/third_party/icons/add.svg);
  --bb-icon-add-inverted: url(/third_party/icons/add-inverted.svg);
  --bb-icon-add-audio: url(/third_party/icons/add-audio.svg);
  --bb-icon-add-circle: url(/third_party/icons/add-circle.svg);
  --bb-icon-add-drawable: url(/third_party/icons/add-drawable.svg);
  --bb-icon-add-file: url(/third_party/icons/add-file.svg);
  --bb-icon-add-image-webcam: url(/third_party/icons/add-image-webcam.svg);
  --bb-icon-add-image: url(/third_party/icons/add-image.svg);
  --bb-icon-add-text: url(/third_party/icons/add-text.svg);
  --bb-icon-add-video: url(/third_party/icons/add-video.svg);
  --bb-icon-arrow-right: url(/third_party/icons/arrow-right.svg);
  --bb-icon-arrow-drop-down: url(/third_party/icons/arrow-drop-down.svg);
  --bb-icon-before: url(/third_party/icons/before.svg);
  --bb-icon-bug: url(/third_party/icons/bug.svg);
  --bb-icon-close: url(/third_party/icons/close.svg);
  --bb-icon-collapse: url(/third_party/icons/collapse.svg);
  --bb-icon-confirm-blue: url(/third_party/icons/confirm-blue.svg);
  --bb-icon-copy-to-clipboard: url(/third_party/icons/copy-to-clipboard.svg);
  --bb-icon-delete: url(/third_party/icons/delete.svg);
  --bb-icon-download: url(/third_party/icons/download.svg);
  --bb-icon-draft: url(/third_party/icons/draft.svg);
  --bb-icon-edge-connector: url(/third_party/icons/edge-connector.svg);
  --bb-icon-edit: url(/third_party/icons/edit.svg);
  --bb-icon-eject: url(/third_party/icons/eject.svg);
  --bb-icon-error: url(/third_party/icons/error.svg);
  --bb-icon-expand: url(/third_party/icons/expand.svg);
  --bb-icon-experiment: url(/third_party/icons/experiment.svg);
  --bb-icon-file-add: url(/third_party/icons/file-add.svg);
  --bb-icon-fit: url(/third_party/icons/fit.svg);
  --bb-icon-folder-managed: url(/third_party/icons/folder-managed.svg);
  --bb-icon-generic-node: url(/third_party/icons/generic-node.svg);
  --bb-icon-help: url(/third_party/icons/help.svg);
  --bb-icon-human: url(/third_party/icons/human.svg);
  --bb-icon-info: url(/third_party/icons/info.svg);
  --bb-icon-input: url(/third_party/icons/input.svg);
  --bb-icon-javascript: url(/third_party/icons/javascript.svg);
  --bb-icon-laps: url(/third_party/icons/laps.svg);
  --bb-icon-lan: url(/third_party/icons/lan.svg);
  --bb-icon-lightbulb: url(/third_party/icons/lightbulb.svg);
  --bb-icon-list: url(/third_party/icons/list.svg);
  --bb-icon-maximize: url(/third_party/icons/maximize.svg);
  --bb-icon-mic-green: url(/third_party/icons/mic-green.svg);
  --bb-icon-minimize: url(/third_party/icons/minimize.svg);
  --bb-icon-merge-type: url(/third_party/icons/merge-type.svg);
  --bb-icon-menu: url(/third_party/icons/menu.svg);
  --bb-icon-menu-inverted: url(/third_party/icons/menu-inverted.svg);
  --bb-icon-model: url(/third_party/icons/model.svg);
  --bb-icon-more-vert-inverted: url(/third_party/icons/more-vert-inverted.svg);
  --bb-icon-move-up: url(/third_party/icons/move-up.svg);
  --bb-icon-move-down: url(/third_party/icons/move-down.svg);
  --bb-icon-next: url(/third_party/icons/next.svg);
  --bb-icon-open-new: url(/third_party/icons/open-new.svg);
  --bb-icon-output: url(/third_party/icons/output.svg);
  --bb-icon-password: url(/third_party/icons/password.svg);
  --bb-icon-preview: url(/third_party/icons/preview.svg);
  --bb-icon-public: url(/third_party/icons/public.svg);
  --bb-icon-quick-jump: url(/third_party/icons/quick-jump.svg);
  --bb-icon-redo-inverted: url(/third_party/icons/redo-inverted.svg);
  --bb-icon-recent: url(/third_party/icons/recent.svg);
  --bb-icon-refresh: url(/third_party/icons/refresh.svg);
  --bb-icon-reset-image: url(/third_party/icons/reset-image.svg);
  --bb-icon-reset-nodes: url(/third_party/icons/reset-nodes.svg);
  --bb-icon-resume-blue: url(/third_party/icons/resume-blue.svg);
  --bb-icon-rsvp: url(/third_party/icons/rsvp.svg);
  --bb-icon-save: url(/third_party/icons/save.svg);
  --bb-icon-save-as: url(/third_party/icons/save-as.svg);
  --bb-icon-save-inverted: url(/third_party/icons/save-inverted.svg);
  --bb-icon-share: url(/third_party/icons/share.svg);
  --bb-icon-search: url(/third_party/icons/search.svg);
  --bb-icon-settings: url(/third_party/icons/settings.svg);
  --bb-icon-settings-inverted: url(/third_party/icons/settings-inverted.svg);
  --bb-icon-smart-toy: url(/third_party/icons/smart-toy.svg);
  --bb-icon-sound: url(/third_party/icons/sound.svg);
  --bb-icon-stop-circle: url(/third_party/icons/stop-circle.svg);
  --bb-icon-toggle-on: url(/third_party/icons/toggle-on.svg);
  --bb-icon-toggle-off: url(/third_party/icons/toggle-off.svg);
  --bb-icon-tool: url(/third_party/icons/tool.svg);
  --bb-icon-undo-inverted: url(/third_party/icons/undo-inverted.svg);
  --bb-icon-unfold-less: url(/third_party/icons/unfold-less.svg);
  --bb-icon-unfold-more: url(/third_party/icons/unfold-more.svg);
  --bb-icon-visibility-off: url(/third_party/icons/visibility-off.svg);
  --bb-icon-warning: url(/third_party/icons/warning.svg);

  --bb-icon-expand-all-48px: url(/third_party/icons/expand-all-48px.svg);
  --bb-icon-arrow-down-48px: url(/third_party/icons/arrow-down-48px.svg);

  --bb-warning-50: #ffeeee;
  --bb-warning-100: #ffcccc;
  --bb-warning-200: #ff9999;
  --bb-warning-300: #ff6666;
  --bb-warning-400: #ff3333;
  --bb-warning-500: #ff0000;
  --bb-warning-600: #cc0000;
  --bb-warning-700: #990000;
  --bb-warning-800: #660000;
  --bb-warning-900: #330000;

  --bb-inputs-50: #eaf7e7;
  --bb-inputs-100: #bbe7b0;
  --bb-inputs-200: #9adc8a;
  --bb-inputs-300: #6ccb55;
  --bb-inputs-400: #4fc134;
  --bb-inputs-500: #24b202;
  --bb-inputs-600: #20a202;
  --bb-inputs-700: #1a7e01;
  --bb-inputs-800: #136202;
  --bb-inputs-900: #0f4b00;

  --bb-nodes-50: #fff9e6;
  --bb-nodes-100: #ffebb0;
  --bb-nodes-200: #ffe28b;
  --bb-nodes-300: #ffd454;
  --bb-nodes-400: #ffcc33;
  --bb-nodes-500: #ffbf00;
  --bb-nodes-600: #e8af02;
  --bb-nodes-700: #b68902;
  --bb-nodes-800: #8c6900;
  --bb-nodes-900: #6b5000;

  --bb-boards-50: #fff4eb;
  --bb-boards-100: #ffdfc0;
  --bb-boards-200: #ffcea1;
  --bb-boards-300: #feb876;
  --bb-boards-400: #feab5c;
  --bb-boards-500: #fe9533;
  --bb-boards-600: #e7882e;
  --bb-boards-700: #b46b24;
  --bb-boards-800: #8c521b;
  --bb-boards-900: #6b3f15;

  --bb-ui-50: #ecf5ff;
  --bb-ui-100: #c0dfff;
  --bb-ui-200: #a1d0ff;
  --bb-ui-300: #77bbff;
  --bb-ui-400: #5cadff;
  --bb-ui-500: #3399ff;
  --bb-ui-600: #2e8be8;
  --bb-ui-700: #246db5;
  --bb-ui-800: #1b548c;
  --bb-ui-900: #1b548c;

  --bb-neutral-0: #ffffff;
  --bb-neutral-10: #fafafa;
  --bb-neutral-50: #f6f6f6;
  --bb-neutral-100: #ededed;
  --bb-neutral-200: #e3e3e3;
  --bb-neutral-300: #d9d9d9;
  --bb-neutral-400: #c2c2c2;
  --bb-neutral-500: #9c9c9c;
  --bb-neutral-600: #7a7a7a;
  --bb-neutral-700: #595959;
  --bb-neutral-800: #333333;
  --bb-neutral-900: #1a1a1a;

  --bb-human-50: #ece7f4;
  --bb-human-100: #cfc3e4;
  --bb-human-200: #b19cd2;
  --bb-human-300: #9274c0;
  --bb-human-400: #7c56b3;
  --bb-human-500: #653aa6;
  --bb-human-600: #5d35a0;
  --bb-human-700: #512d97;
  --bb-human-800: #46278e;
  --bb-human-900: #351c7f;

  --bb-looper-50: #e0f2f1;
  --bb-looper-100: #b2dfdb;
  --bb-looper-200: #80cbc4;
  --bb-looper-300: #4db6ac;
  --bb-looper-400: #26a69a;
  --bb-looper-500: #009688;
  --bb-looper-600: #00897b;
  --bb-looper-700: #00796b;
  --bb-looper-800: #00695c;
  --bb-looper-900: #004d40;

  --bb-title-large: 22px;
  --bb-title-line-height-large: 28px;

  --bb-title-medium: 16px;
  --bb-title-line-height-medium: 24px;

  --bb-title-small: 14px;
  --bb-title-line-height-small: 20px;

  --bb-label-large: 14px;
  --bb-label-line-height-large: 20px;

  --bb-label-medium: 12px;
  --bb-label-line-height-medium: 16px;

  --bb-label-small: 11px;
  --bb-label-line-height-small: 16px;

  --bb-body-large: 16px;
  --bb-body-line-height-large: 24px;

  --bb-body-medium: 14px;
  --bb-body-line-height-medium: 20px;

  --bb-body-small: 12px;
  --bb-body-line-height-small: 16px;

  --bb-body-x-small: 10px;
  --bb-body-line-height-x-small: 13px;

  --bb-font-title-large: 400 22px/28px var(--bb-font-family);
  --bb-font-title-medium: 400 16px/24px var(--bb-font-family);
  --bb-font-title-small: 400 14px/20px var(--bb-font-family);

  --bb-font-label-large: 400 14px/20px var(--bb-font-family);
  --bb-font-label-medium: 400 12px/16px var(--bb-font-family);
  --bb-font-label-small: 400 11px/16px var(--bb-font-family);

  --bb-font-body-large: 400 16px/24px var(--bb-font-family);
  --bb-font-body-medium: 400 14px/20px var(--bb-font-family);
  --bb-font-body-small: 400 12px/16px var(--bb-font-family);
  --bb-font-body-x-small: 400 10px/13px var(--bb-font-family);

  /** Depth Colors */
  --bb-depth-1: hsl(48deg, 60%, 98%);
  --bb-depth-2: hsl(45deg, 60%, 96%);
  --bb-depth-3: hsl(42deg, 60%, 94%);
  --bb-depth-4: hsl(39deg, 60%, 92%);
  --bb-depth-5: hsl(36deg, 60%, 90%);
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--bb-font-family);
  color: var(--bb-font-color);
  width: 100%;
  height: 100svh;
  background: var(--bb-neutral-0);
}