/* 
 Common classnames:
 - inline: Inline behaviour on different elements
 - active: Elements that are active (for example after click)
 - left, right: Alignment to the left or right
 - xs, s, m, l, xl: Sizes, effect depends on context

*/

:root{
  /* Raw Colors */
  --rawcol-background: 255, 255, 255; /* Main background, should be similiar to --url-bg if set*/
  --rawcol-background-accent: 231, 228, 219; /* Accented background used as an alternative */
  --rawcol-background-opposite: 76, 73, 63; /* Opposite background background (dark when background is bright and vice-versa) */

  /* Main colors */
  --url-bg: none; /* Background image (optional) */
  --col-background: rgb(var(--rawcol-background)); /* Main background of the page */
  --col-background-accent: rgb(var(--rawcol-background-accent)); /* Accented background used as alternative to the background */
  --col-background-opposite: rgb(var(--rawcol-background-opposite)); /* Opposite background background (dark when background is bright and vice-versa) */

  /* Text */
  --col-text: #090909; /* Base text color for text on the page and elements without backgrounds */
  --col-text-default: #8b7c68; /* Text color when a default text is shown that can be edited */
  --col-text-disabled: #808881; /* Text color for disabled content that does not have a background */
  --col-title: #090909; /* Text color for titles */
  --col-title-contrast: #090909; /* Text color for titles with a higher contrast to the background */
  --col-annotation: #465c51; /* Used for annotations displayed next to the text */
  --col-link: #c7560b; /* Color for links */

  /* Elements with background: Placed on the page with a border and background, for example buttons */
  --col-element-background: #f0e9da; /* Background for elements */
  --col-element-background-active: #917b67; /* Background for active elements */
  --col-element-background-hover: #f8d079; /* Background for elements while hovering */
  --col-element-background-disabled: #c0bfbc; /* Background for elements when disabled */
  --col-element-border: #998b70; /* Border for elements */
  --col-element-text: #998b70; /* Text for elements */
  --col-element-text-active: #eee4d0; /* Text for active elements */
  --col-element-text-hover: #668877; /* Text for elements while hovering */
  --col-element-text-disabled: #494337; /* Text for elements when disabled */

  /* Warning and errors */
  --col-positive: #749174; /* Positive color, used for success */
  --col-negative: #be6f6f; /* Negative color, used for errors */
  --col-warning: #ff5500; /* Warning color */
  --col-warning-bg: #f7bf27; /* Background color for elements with a warning */
  --col-warning-border: #be4102; /* Border color for elements with a warning */
  --col-warning-opacity: rgba(255, 85, 0, 0.3); /* Opacity color for warnings overlayed onto something else */
  --col-indicator: #e69a28; /* Indicator color */

  /* Custom */
  --col-bg-yellow: #FFE699;
  --col-bg-orange: #F8CBAD;
  --col-bg-purple: #DCC5ED;
  --col-bg-green: #C5E0B4;

  --col-text-yellow: #FFFF00;
  --col-text-yellow-damped: #FFC000;
  --col-text-orange: #ED7D31;
  --col-text-purple: #7030A0;
  --col-text-green: #00B050;
}

/* #region General */

/* Body styling */
body {
  color: var(--col-text);
  background-image: var(--url-bg);
  background-color: var(--col-background);
  scrollbar-width: thin;
}

/* Variables */
:root{
  --tooltip-delay: 500ms;
}

/* Webkit thin scrollbars */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

a {
  color: var(--col-link);
}

/* Headers */
*:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

*:is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: .5em;
  color: var(--col-title);
}

/* Format something as a link without being an <a> tag */
.link {
  color: var(--col-link);
  text-decoration: underline;
  cursor: pointer;
}

/* Loading overlay that prevents interaction while loading */
#loadingOverlay {
  z-index: 20;
  line-height: 100vh;
  text-align: center;
  font-size: 3em;
  color: #E9E9E9;
}

/* Messagebox */
#messageBox {
  background-color: var(--col-background);
  color: var(--col-fg);
  border: var(--col-background-accent);
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
  max-width: 32em;
  margin: auto;
  margin-top: 4em;
  padding: .2em;
}

/* Images for inline icons */
img.inline {
  height: 1.1em;
  vertical-align: middle;
  margin-top: -0.1em;
}

img.inline:not(:first-child) {
  padding-left: 0.1em;
}

img.inline:not(:last-child) {
  padding-right: 0.1em;
}

/* Separator to use between text blocks, especially inside of block elements */
.separator {
  height: 1px;
  width: 100%;
  border-top: 1px solid var(--col-text);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: block;
}

/* Element that shows children on hovering */
.hoverforchildren>*:not(.excluded) {
  visibility: hidden;
}

.hoverforchildren:hover>*:not(.excluded) {
  visibility: initial;
}

/* Element that shows children when .active */
.activeforchildren>*:not(.excluded) {
  visibility: hidden;
}

.activeforchildren.active>*:not(.excluded) {
  visibility: initial;
}

/* #endregion General */

/* #region Overlay */
/* ToDo */
/* #endregion Overlay */

/* #region User Input */

/* Default styling for select and input */
select,
input {
  background-color: var(--col-background);
  border: 1px solid var(--col-background-accent);
  border-radius: 2px;
  font-size: 1em;
  font-family: inherit;
  padding: 2px;
}

select.inline,
input.inline {
  padding: 1px;
  font-size: .8em;
}

/* Default styling for buttons or elements pretending to be buttons via .btn */
button,
.btn {
  text-decoration: none;
  border-radius: .25rem;
  display: inline-block;
  text-align: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
  cursor: pointer;
  line-height: 1.5em;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
  background-color: var(--col-element-background);
  color: var(--col-element-text);
  border: 2px solid var(--col-element-border);
}

button:hover:not(.active),
.btn:hover:not(.active) {
  background-color: var(--col-element-hover);
  color: var(--col-element-text-hover);
}

button.active,
.btn.active {
  background-color: var(--col-element-active);
  color: var(--col-element-text-active);
}

button.inline {
  font-size: 0.8em;
  margin-left: 0.2em;
  margin-right: 0.2em;
  padding: 1px;
}

button.inline.right {
  float: right;
}


/* Buttons which only have a i child (for use with fontawesome icons) */
button:has(i):not(.inline):not(:has(:not(i))) {
  height: 2em;
  line-height: 2em;
  text-align: center;
}

button:has(i):not(.inline):not(:has(:not(i)))>i {
  width: 1em;
  height: 1em;
}

/* Editors and buttons without decorations (no borders and such) */
.pure {
  border: none !important;
  outline: none !important;
  background: none;
  border-radius: 2px;
  font-size: 1em;
  margin: 0;
  box-sizing: border-box;
  font-family: inherit;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: inherit;
}

.pure:hover {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
  appearance: auto;
  -moz-appearance: auto;
  -webkit-appearance: auto;
}

.pure:disabled {
  opacity: .75;
  color: var(--col-text-disabled);
  background: none !important;
}

.pure:disabled:hover {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
}

.pure:focus,
.pure:focus-visible {
  background-color: var(--col-background);
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
  appearance: auto;
  -moz-appearance: auto;
  -webkit-appearance: auto;
}

/* #endregion Editors */

/* #region Visibility */

/* Element is invisible but still takes up space on the page */
.invisible {
  visibility: hidden;
  opacity: 0 !important;
}

/* Element is completely removed from the page and does not take up space anymore */
.concealed {
  display: none !important;
  opacity: 0 !important;
}

/* Transition for hiding via .invisible and .concealed */
.hidesmooth {
  transition: opacity 250ms, visibility 250ms;
}

/* #endregion Visibility */

/* #region Flex */

/* Enable flex */
.flex {
  display: flex;
  -ms-flex-align: no-wrap;
}

/* Flex Direction */
.flex.row {
  flex-direction: row;
}

.flex.column {
  flex-direction: column;
}

/* Enable wrapping */
.flex.wrap {
  flex-wrap: wrap;
  -ms-flex-align: wrap;
}

/* Content alignment (in flex direction) */
.flex.start {
  justify-content: flex-start;
}

.flex.end {
  justify-content: flex-end;
}

.flex.center {
  justify-content: center;
}

.flex.spaced {
  justify-content: space-between;
}

.flex.around {
  justify-content: space-around;
}

.flex.even {
  justify-content: space-evenly;
}

/* Content alignment (perpendicular to flex direction) */
.flex.ai-start {
  align-items: flex-start;
}

.flex.ai-end {
  align-items: flex-end;
}

.flex.ai-center {
  align-items: center;
}

.flex.ai-stretch {
  align-items: stretch;
}

.flex.ai-baseline {
  align-items: baseline;
}

/* Gaps */
.gap-02 {
  gap: .2em;
}

.gap-05 {
  gap: .5em;
}

.gap-1 {
  gap: 1em;
}

.gap-2 {
  gap: 2em;
}

/* Children */

/*
  Fixed percentage-based widths.
  Ensure proper behaviour based on gap of parent. 
*/
.w-10 {
  width: 10%;
}

.flex.gap-02>.w-10 {
  width: calc(10% - .18em);
}

.flex.gap-05>.w-10 {
  width: calc(10% - .45em);
}

.flex.gap-1>.w-10 {
  width: calc(10% - .9em);
}

.flex.gap-2>.w-10 {
  width: calc(10% - 1.8em);
}

.w-25 {
  width: 25%;
}

.flex.gap-02>.w-25 {
  width: calc(25% - .15em);
}

.flex.gap-05>.w-25 {
  width: calc(25% - .375em);
}

.flex.gap-1>.w-25 {
  width: calc(25% - .75em);
}

.flex.gap-2>.w-25 {
  width: calc(25% - 1.5em);
}

.w-33 {
  width: 33%;
}

.flex.gap-02>.w-33 {
  width: calc(33% - .15em);
}

.flex.gap-05>.w-33 {
  width: calc(33% - .35em);
}

.flex.gap-1>.w-33 {
  width: calc(33% - .7em);
}

.flex.gap-2>.w-33 {
  width: calc(33% - 1.35em);
}

.w-50 {
  width: 50%;
}

.flex.gap-02>.w-50 {
  width: calc(50% - .1em);
}

.flex.gap-05>.w-50 {
  width: calc(50% - .25em);
}

.flex.gap-1>.w-50 {
  width: calc(50% - .5em);
}

.flex.gap-2>.w-50 {
  width: calc(50% - 1em);
}

.w-66 {
  width: 66%;
}

.flex.gap-02>.w-66 {
  width: calc(66% - .1em);
}

.flex.gap-05>.w-66 {
  width: calc(66% - .25em);
}

.flex.gap-1>.w-66 {
  width: calc(66% - .5em);
}

.flex.gap-2>.w-66 {
  width: calc(66% - 1em);
}

.w-75 {
  width: 75%;
}

.flex.gap-02>.w-75 {
  width: calc(75% - .1em);
}

.flex.gap-05>.w-75 {
  width: calc(75% - .25em);
}

.flex.gap-1>.w-75 {
  width: calc(75% - .5em);
}

.flex.gap-2>.w-75 {
  width: calc(75% - 1em);
}

.w-100 {
  width: 100%;
}

/*
  Makes children with one of the classes grow.
  If all children have the same flex-grow they grow equally, if one has 2 and the others have one it will be able to grow to be twice as big.
  Note that growing equally just means the get bigger in equal amounts, and not that their final size will be equal (for that case flex-basis would need to be set).
  If other children don't have .noshrink, they will shrink automatically.
  See https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg for grow behaviour.
*/
.flex>.grow {
  flex-grow: 1;
}

.flex>.grow-2 {
  flex-grow: 2;
}

.flex>.grow-3 {
  flex-grow: 3;
}

.flex>.grow-4 {
  flex-grow: 4;
}

/* Prevents shrinking of an element (default value is 1) */
.flex>.noshrink {
  flex-shrink: 0;
}

/* Enables further shrinking compared to the default value */
.flex>.shrink {
  flex-shrink: 2;
}

/* Enables a small basis to ensure elements are as small as possible, intended to be used with .grow */
.flex>.smallbasis {
  flex-basis: 1px;
}

/* Override align-items (alignment perpendicular to flex direction) for single children */
.flex>.start {
  align-self: flex-start;
}

.flex>.end {
  align-self: flex-end;
}

.flex>.center {
  align-self: center;
}

.flex>.stretch {
  align-self: stretch;
}

.flex>.baseline {
  align-self: baseline;
}

/* #endregion Flex */

/*#region Tooltip */

/*
  A container having a tooltip always has the .tooltip class.
  It can either have a data-tooltip argument, displaying it's text automatically or a subelement with tooltip content
  The default position is below the element, but can be adjusted with other classes
*/
.tooltip{
  position: relative;
}
/* Applies bottom border to indicate tooltip */
.tooltip.indicated{
  border-bottom: 1px dashed var(--col-text);
}

/* Styling of tooltip content (either :before or a child with .tt) */
.tooltip::before, .tooltip > .tt{
  position: absolute;
  z-index: 1;
  
  padding: 5px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--col-background-accent);
  color: var(--col-text);

  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms;

  font-size: 0.9rem;
  font-family: Arial;
  font-weight: normal;
  text-align: left;
  text-rendering: initial;
  font-style: normal;
  font-variant: normal;
  line-height: initial;

  width: 100%;
  top: 100%;
  margin-top: 1.2em;
}
.tooltip.s:before, .tooltip.s > .tt{
  width: 6em;
}
.tooltip.m:before, .tooltip.m > .tt{
  width: 12em;
}
.tooltip.l:before, .tooltip.l > .tt{
  width: 20em;
}

/* Tooltips with a data-tooltip attribute have that text in their :before */
.tooltip[data-tooltip]::before {
  content: attr(data-tooltip);
  text-align: center;
}

/* Enable tooltip content on hover */
.tooltip[data-tooltip]:hover::before, .tooltip[data-tooltip]:hover::after, .tooltip:hover > .tt, .tooltip:hover > .tt::after {
  transition-delay: var(--tooltip-delay);
  visibility: visible;
  opacity: 1;
}

/* ToDo tooltip sides (currently tooltip is always shown below the element */

/*#endregion Tooltip */