/* STYLE BLOCK - base */


:root {
  /* Dark theme */
  color-scheme: dark;
  --primary-color-h: 166;
  --primary-color-s: 50%;
  --primary-color-l: 90%;

  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
  --darkest-color: hsl(var(--primary-color-h), 8%, 12%);
  --dark-color: hsl(var(--primary-color-h), 8%, 18%);
  --medium-color: hsl(var(--primary-color-h), 8%, 30%);
  --light-color: hsl(var(--primary-color-h), 6%, 65%);
  --lightest-color: hsl(var(--primary-color-h), 4%, 80%);
  --white-color: hsl(0, 0%, 100%);

  --header-text: var(--white-color);
  /* --main-text: var(--lightest-color); */
  --main-text: var(--white-color);
  --secondary-text: var(--lightest-color);
  --main-bg: var(--darkest-color);
  --popup-text: var(--main-text);
  --popup-bg: var(--dark-color);
  --input-text: var(--main-text);
  --input-bg: var(--medium-color);
  --mute-text: var(--light-color);
  --very-mute-text: var(--medium-color);
  --link-hover-bg: rgba(127, 127, 127, 0.4);
  --nice-red: rgb(215, 46, 36);
  --bright-red: rgb(245, 49, 0);
  --text-button-hover: var(--nice-red);

  --row-highlight-bg: blue;

  --editor-header-color: #2196F3;

  --space-zero: 0px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 80px;

  /* Base font sizes */
  --f-xxs: 12px;
  --f-2xs: 12px;
  --f-xs: 14px;
  --f-s: 16px;
  --f-m: 18px;
  --f-l: 20px;
  --f-2l: 24px;
  --f-xl: 30px;
  --f-xxl: 36px;
  --f-2xl: 36px;
  --f-xxxl: 48px;
  --f-3xl: 48px;
  --f-4xl: 60px;
  --f-5xl: 72px;

  --p-size: var(--f-m);
  --h4-size: var(--f-l);
  --h3-size: var(--f-2l);
  --h2-size: var(--f-xl);
  --h1-size: var(--f-xxl);

  /* --p-size: 1rem; */
  --p-size: 22px;
  --h4-size: calc(var(--p-size)*1.25);
  --h3-size: calc(var(--h4-size)*1.25);
  --h2-size: calc(var(--h3-size)*1.25);
  --h1-size: calc(var(--h2-size)*1.25);
  --small-size: calc(var(--p-size)*0.90);
  --smaller-size: calc(var(--small-size)*0.90);

  --main-line-height: 1.6;

  --bold-weight: 700;

  --border-radius-s: 4px;
  --border-radius-m: 6px;
  --border-radius-l: 8px;

  /* Legacy */
  --border-radius-small: var(--border-radius-s);
  --border-radius-med: var(--border-radius-m);
  --border-radius-large: var(--border-radius-l);

  --border-reg: 1px solid var(--secondary-text);

  --box-shadow-front: 0px 4px 8px hsl(0, 0%, 38%);
  /*
  --box-shadow-mid: 0px 4px 8px hsl(0, 0%, 40%);
  --box-shadow-back: 0px 4px 8px hsl(0, 0%, 40%);
  */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  /*font-weight: normal;*/
}

html {
  /* Always show the y scroll-bar, to prevent reflow on scrollbar show/hide */
  /* overflow-y: scroll; */
}

body {
  position: relative;
  max-width: 100vw;
  min-height: 100vh;
  /* background: var(--main-bg); */
  background: var(--white-color);
  color: var(--main-text);
  transition: color 0.5s, background-color 0.5s;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--p-size);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Disable overscroll bounce/scroll on mobile */
html, body {
  overscroll-behavior: none;
}

#app {
  margin: 0 auto;
  /*padding: 2rem;*/
  /*font-weight: normal;*/
}

/* Prevent flashes on tap on mobile */
/* https://stackoverflow.com/questions/6211959/html5-div-flashes-on-tap */
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

p {
  line-height: var(--main-line-height);
  font-size: var(--p-size);
  color: var(--main-text);
}

h1, h2, h3, h4 {
  font-weight: var(--bold-weight);
  color: var(--header-text);
}

h1 {
  font-size: var(--h1-size);
  line-height: 1.1;
  letter-spacing: -2px;
}

h2 {
  font-size: var(--h2-size);
  line-height: 1.2;
  /* letter-spacing: -1px; */
}

h3 {
  font-size: var(--h3-size);
  line-height: 1.4;
  /* letter-spacing: -1px; */
}

h4 {
  font-size: var(--h4-size);
  line-height: 1.6;
}

b {
  font-weight: var(--bold-weight);
}

a {
  color: var(--main-text);
  transition: 0.2s;
}

a:hover, a:active {
  background-color: var(--link-hover-bg);
}

/* Note: if need to set a small min-width, set the <input size="1" .../>. Default size is large and overrides min-width */
/* See: https://stackoverflow.com/questions/29470676/why-doesnt-the-input-element-respect-min-width */
.BasicTextInput {
  display: block;
  padding: 4px;
  /* margin: 5px 0; */
  /* border: 1px solid var(--light-color); */
  border: none;
  border-radius: var(--border-radius-small);
  font-size: var(--p-size);
  background-color: var(--input-bg);
}

input[type="text"]{
  background-color: var(--input-bg); 
  color: var(--main-text);
}

textarea {
  background-color: var(--input-bg); 
  color: var(--main-text);
  border: var(--border-reg);
  border-radius: 4px;
  padding: 4px;
  font-size: var(--smaller-size);
}

select {
  font-size: var(--p-size);
  /* color: var(--main-text); */
  background-color: var(--input-bg);
  border: none;
  border-radius: var(--border-radius-small);
  padding: 4px;
  min-width: 18ch;
  max-width: 30ch;
}


/* STYLE BLOCK - utils */


/*
Various CSS utils
*/

.Italic {
  font-style: italic;
}

.Bold {
  font-weight: var(--bold-weight);
}

/*
For text you don't want to get highlighted when
it gets clicked. Say if using for a button
*/
.NoSelect {
  user-select: none;
}

.Block {
  display: block;
}

.InlineBlock {
  display: inline-block;
}

.Flex {
  display: flex;
  flex-flow: row wrap;
}

.FlexRowNoWrap {
  display: flex;
  flex-flow: row nowrap;
}

.MarginLeft {
  margin-left: var(--space-s);
}

.MarginTop {
  margin-top: var(--space-xs);
}

.MarginBot0 {
  margin-bottom: 0;
}

.MarginBotS {
  margin-bottom: var(--space-s);
}

.MarginBotXS {
  margin-bottom: var(--space-xs);
}

.MarginBotXXS {
  margin-bottom: var(--space-xxs);
}

/* Margin utility classes */
/* Margin Top */
.mt-zero { margin-top: var(--space-zero); }
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

/* Margin Bottom */
.mb-zero { margin-bottom: var(--space-zero); }
.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }

/* Margin Left */
.ml-zero { margin-left: var(--space-zero); }
.ml-xxs { margin-left: var(--space-xxs); }
.ml-xs { margin-left: var(--space-xs); }
.ml-s { margin-left: var(--space-s); }
.ml-m { margin-left: var(--space-m); }
.ml-l { margin-left: var(--space-l); }
.ml-xl { margin-left: var(--space-xl); }
.ml-xxl { margin-left: var(--space-xxl); }
.ml-auto { margin-left: auto; }

/* Margin Right */
.mr-zero { margin-right: var(--space-zero); }
.mr-xxs { margin-right: var(--space-xxs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-s { margin-right: var(--space-s); }
.mr-m { margin-right: var(--space-m); }
.mr-l { margin-right: var(--space-l); }
.mr-xl { margin-right: var(--space-xl); }
.mr-xxl { margin-right: var(--space-xxl); }
.mr-auto { margin-right: auto; }

/* Margin All */
.m-zero { margin: var(--space-zero); }
.m-xxs { margin: var(--space-xxs); }
.m-xs { margin: var(--space-xs); }
.m-s { margin: var(--space-s); }
.m-m { margin: var(--space-m); }
.m-l { margin: var(--space-l); }
.m-xl { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }

/* Margin Horizontal (left and right) */
.mx-zero { margin-left: var(--space-zero); margin-right: var(--space-zero); }
.mx-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.mx-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.mx-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

/* Margin Vertical (top and bottom) */
.my-zero { margin-top: var(--space-zero); margin-bottom: var(--space-zero); }
.my-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }

/* Font size utility classes */
.f-xxs { font-size: var(--f-xxs); }
.f-2xs { font-size: var(--f-2xs); }
.f-xs { font-size: var(--f-xs); }
.f-s { font-size: var(--f-s); }
.f-m { font-size: var(--f-m); }
.f-l { font-size: var(--f-l); }
.f-2l { font-size: var(--f-2l); }
.f-xl { font-size: var(--f-xl); }
.f-xxl { font-size: var(--f-xxl); }
.f-2xl { font-size: var(--f-2xl); }
.f-xxxl { font-size: var(--f-xxxl); }
.f-3xl { font-size: var(--f-3xl); }
.f-4xl { font-size: var(--f-4xl); }
.f-5xl { font-size: var(--f-5xl); }

/* Semantic font size utility classes */
.f-p { font-size: var(--p-size); }
.f-h4 { font-size: var(--h4-size); }
.f-h3 { font-size: var(--h3-size); }
.f-h2 { font-size: var(--h2-size); }
.f-h1 { font-size: var(--h1-size); }
.f-small { font-size: var(--small-size); }
.f-smaller { font-size: var(--smaller-size); }

.DraggedChosenItem {
  background-color: var(--color-link-hover);
}

.FeatherIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.EditorInput {
  display: block;
  flex: 1;
  padding: 4px 8px;
  min-height: auto;
  width: 50px;
  min-width: 20px;
  /*max-width: 120px;*/
  border: none;
  border-radius: var(--border-radius-small);
  font-size: var(--f-m);
  background-color: var(--input-bg);
}

.EditorSubheading {
  font-size: var(--f-l);
  font-weight: var(--bold-weight);
  color: var(--secondary-text);
  margin-bottom: var(--space-xxs);
}



/* STYLE BLOCK - buttons */


:root {
  --button-border-radius: var(--border-radius-small);
}

/* The default 'button' is the PrimaryButton here */
button {
  min-width: 100px;
  padding: 6px 12px;
  /*margin: 4px 0px;*/
  background: none;
  color: var(--main-text);
  /* border: 2px solid var(--main-text); */
  border: 1px solid var(--main-text);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  font-weight: 600;
  /* font-weight: var(--bold-weight); */
  font-size: var(--f-m);
}

button:hover, button:active {
  background-color: var(--main-text);
  color: var(--main-bg);
}

/* No need for a different PrimaryButton for now */
/*
.PrimaryButton {
  border: none;
  border-radius: var(--button-border-radius);
  background-color: var(--main-text);
  color: var(--main-bg);
}

.PrimaryButton:hover, .PrimaryButton:active {
}
*/

.TertiaryButton, .SaveButton, .BackButton {
  text-decoration: underline;
  /* color: var(--secondary-text); */
  border: none;
  border-radius: var(--border-radius-small);
  padding: 2px;
  margin: 4px 0px;
  min-width: 20px;
}

/* For low-profile buttons (look like bold text) */
.SmallButton {
  border: none;
  border-radius: var(--border-radius-small);
  padding: 2px;
  margin: 4px 0px;
  min-width: 20px;
}

.SmallButton:hover, .SmallButton:active {
  background-color: var(--main-text);
  color: var(--main-bg);
}

.DeleteButton {
  text-decoration: underline;
  /* padding: 5px 10px; */
  /* border: 1px solid var(--main-text); */
}

.DeleteButton:hover {
}

.LinkButton {
  text-decoration: underline;
  font-weight: 600;
}

/* For adding to a text div that is supposed to respond to @click */
.TextButton {
  background: none;
  border: none;
  padding: 0;
  user-select: none;
  cursor: pointer;
  font-weight: var(--bold-weight);
}

.TextButton:hover, .TextButton:active {
  color: var(--text-button-hover);
}

/*
Also, for adding to a text div that is supposed to respond to @click.
Does not alter the other styles of the element.
*/
.MockButton {
  user-select: none;
  cursor: pointer;
}

.MockButton:hover, .MockButton:active {
  color: var(--text-button-hover);
}



/* STYLE BLOCK - writer */


/* STYLES FROM SceneEditor.vue */

main {
  position: relative;

  overflow: hidden;
  width: 100%;
  height: 100vh;

  /* CanvasArea should display at the center/center of main */
  /* TODO - is this right? */
  display: flex;
  justify-content: center;
  align-items: center;

  /*
  Disable double-tap to globally on mobile. It causes a lot of problems with buttons
  like menu show/hide.
  See: https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices
  */
  touch-action: manipulation;

  --translateX: 0px;
  --translateY: 0px;
  --canvas-scale: 1;
}

#CanvasArea {
  position: relative;
  transform: translate(var(--translateX, 0px), var(--translateY, 0px)) scale(var(--canvas-scale));
  /*width: var(--canvasWidth);*/
  /*height: var(--canvasHeight);*/
}

.AnchorDiv {
  position: absolute;  
  /*width: auto;*/
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  /*-webkit-transform: translate(-50%, -50%);*/
  /*transform: translate(-50%, -50%);*/
}

.AnchorDiv p, .AnchorDiv h1,
.AnchorDiv h2, .AnchorDiv h3,
.AnchorDiv h4 {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
}

/* END - STYLES FROM SceneEditor.vue */

/* WIDGETS CSS */

.Widget {
  position: absolute;
}

.NodeWidget {
  /* position: absolute;   */
  width: 0px;
  height: 0px;
}

.RectWidget {
  background-color: lightblue;
}

.TextWidget {
  /* Preserve the user's whitespace but also wrap as needed */
  white-space: pre-wrap;
  overflow: visible;
  min-height: 1em;
}

/* Used for the inner <textarea> of TextWidget */
/* Inherit everything so we match the outer div exactly and the text lines up */
.TextWidgetInput {
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  white-space: pre-wrap;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: hidden;
  min-height: 1em;
}

.ImageWidget {
}

.ImageWidget img {
  /* NOTE - img is inline-block by default and if you don't set to block here
  there will be a weird gap below the image */
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
}

.DisabledLink {
  pointer-events: none;
}

.TextLink {
  color: inherit;
  background-color: inherit;
  text-decoration: none;
  user-select: none;
}

.TextLink:hover, .TextLink:active {
  color: inherit;
  background-color: inherit;
}

/* END - WIDGETS CSS */

/* OTHER UTILS */

.PageHeader {
  margin-bottom: var(--space-m);
}

.StdInput {
  margin-bottom: var(--space-xs);
}

.InputLabel {
  color: var(--main-text);
  font-size: var(--small-size);
}

.FormFieldName {
  margin-top: var(--space-s);
  margin-bottom: var(--space-xxs);
}

.FormFieldName:first-child {
  margin-top: 0;
}

.FormFieldNameWithInfo {
  margin-top: var(--space-s);
}

.FormFieldNameWithInfo:first-child {
  margin-top: 0;
}

.FormFieldInfo {
  margin-bottom: var(--space-xxs);
  font-size: var(--small-size);
  color: var(--mute-text);
}

.FormFieldItem {
  margin-top: var(--space-s);
}

.DisclosureBody {
  margin-top: var(--space-xs);
}

.CodeBlock {
  /*background-color: var(--input-bg);*/
  padding: var(--space-s);
  border: 1px solid var(--main-text);
  border-radius: var(--border-radius-med);
  font-family: monospace;
  font-size: var(--p-size);
  /* white-space: pre-wrap; */
  /* I'm not sure how to get this working right for mobile, so use pre-wrap for now */
  white-space: pre-wrap;
  overflow-x: scroll;
}

/* END - OTHER UTILS */


/* STYLE BLOCK - custom */

/* Write your custom CSS here */

/* Example 1 - Add this class to an element to turn its background red */
.RedBackground {
  background-color: red !important;
}

/* Example 2 - Sets a box shadow on the element with this specific id */
#YourElementIdGoesHere {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#TryNowBtn {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.BoxShadow {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#trynow {
  padding: 8px 0px;
  border: none;
  border-radius: 8px;
  background-color: rgb(255, 255, 0);
}