/*!
 * Wunderbaum style sheet (generated from wunderbaum.scss)
 * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
 * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
 */
// @use "sass:meta";
@use "sass:color";
@use "sass:list";

// ----------------------------------------------------------------------------
// --- Define default colors and settings

$font-stack: Helvetica, sans-serif;

// Basic Theme Colors
$error-color: #b5373b;
$node-text-color: #56534c;
$border-color: $node-text-color;
$bg-highlight-color: #26a0da;
$header-color: #dedede;
$background-color: #ffffff;
$alternate-row-color: #f7f7f7; // #fcfcfc;
$alternate-row-color-hover: #f3f3f3; //#f7fcfe;
$focus-border-color: #275dc5;

// derived
$drop-source-color: color.adjust($node-text-color, $lightness: 50%);
$drop-target-color: color.adjust($bg-highlight-color, $lightness: 40%);
$dim-color: color.adjust($node-text-color, $lightness: 20%);
$error-background-color: color.adjust($error-color, $lightness: 45%);
// @debug $dim-color;
$hover-color: color.adjust($bg-highlight-color, $lightness: 48%); // #f7f7f7;
$hover-border-color: $hover-color;
$grid-color: #dedede;
$active-color: #e5f3fb;
$active-cell-color: color.adjust($bg-highlight-color, $lightness: 20%);
$active-border-color: #70c0e7;
$active-hover-color: #dceff8;
$active-hover-border-color: $bg-highlight-color;
$active-column-color: $hover-color;
$active-header-column-color: color.adjust($header-color, $lightness: -10%);
$active-color-grayscale: color.grayscale($active-color);
$active-border-color-grayscale: color.grayscale($active-border-color);
$active-hover-color-grayscale: color.grayscale($active-hover-color);
$active-cell-color-grayscale: color.grayscale($active-cell-color);
$grid-color-grayscale: color.grayscale($grid-color);
// @debug $active-header-column-color;
$filter-dim-color: #dedede;
$filter-submatch-color: #868581;

$row-outer-height: 22px;
$row-inner-height: $row-outer-height - 2; // outer height minus border size
$row-padding-y: calc(($row-outer-height - $row-inner-height) / 2);
$col-padding-x: 2px; // on each side within span.wb-col

$icon-outer-height: $row-inner-height;
$icon-outer-width: 20px;
$icon-height: 16px;
$icon-width: 16px;
$icon-padding-y: calc(($icon-outer-height - $icon-height) / 2);
$icon-padding-x: calc(($icon-outer-width - $icon-width) / 2);

$header-height: $row-outer-height;

// PyCharm:
// $level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
//   rgba(255, 240, 255, 1), rgba(234, 253, 253, 1);
// VS-Code_
// $level-rainbow: rgba(255, 255, 64, 0.07), rgba(127, 255, 127, 0.07),
//   rgba(255, 127, 255, 0.07), rgba(79, 236, 236, 0.07);
// Slightly stronger*
$level-rainbow:
  rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254), rgb(204, 250, 250);

// ----------------------------------------------------------------------------
// --- Define CSS variables with calculated default values

:root,
:host {
  // :host needed for ShadowDom

  // TODO: do we need to use 'meta.inspect' in case a font name contains spaces?
  // --wb-font-stack: #{meta.inspect($font-stack)};
  --wb-font-stack: #{$font-stack};

  // Basic Theme Colors
  --wb-error-color: #{$error-color};
  --wb-node-text-color: #{$node-text-color};
  --wb-border-color: #{$border-color};
  --wb-bg-highlight-color: #{$bg-highlight-color};
  --wb-header-color: #{$header-color};
  --wb-background-color: #{$background-color};
  --wb-alternate-row-color: #{$alternate-row-color};
  --wb-alternate-row-color-hover: #{$alternate-row-color-hover};
  --wb-focus-border-color: #{$focus-border-color};

  // derived
  --wb-drop-source-color: #{$drop-source-color};
  --wb-drop-target-color: #{$drop-target-color};
  --wb-dim-color: #{$dim-color};
  --wb-error-background-color: #{$error-background-color};
  --wb-hover-color: #{$hover-color};
  --wb-hover-border-color: #{$hover-border-color};
  --wb-grid-color: #{$grid-color};
  --wb-active-color: #{$active-color};
  --wb-active-cell-color: #{$active-cell-color};
  --wb-active-border-color: #{$active-border-color};
  --wb-active-hover-color: #{$active-hover-color};
  --wb-active-hover-border-color: #{$active-hover-border-color};
  --wb-active-column-color: #{$active-column-color};
  --wb-active-header-column-color: #{$active-header-column-color};
  --wb-active-color-grayscale: #{$active-color-grayscale};
  --wb-active-border-color-grayscale: #{$active-border-color-grayscale};
  --wb-active-hover-color-grayscale: #{$active-hover-color-grayscale};
  --wb-active-cell-color-grayscale: #{$active-cell-color-grayscale};
  --wb-grid-color-grayscale: #{$grid-color-grayscale};

  --wb-filter-dim-color: #{$filter-dim-color};
  --wb-filter-submatch-color: #{$filter-submatch-color};

  --wb-row-outer-height: #{$row-outer-height};
  --wb-row-inner-height: #{$row-inner-height};
  --wb-row-padding-y: #{$row-padding-y};
  --wb-col-padding-x: #{$col-padding-x};

  --wb-icon-outer-height: #{$icon-outer-height};
  --wb-icon-outer-width: #{$icon-outer-width};
  --wb-icon-height: #{$icon-height};
  --wb-icon-width: #{$icon-width};
  --wb-icon-padding-y: #{$icon-padding-y};
  --wb-icon-padding-x: #{$icon-padding-x};

  --wb-header-height: #{$header-height};
}

// ----------------------------------------------------------------------------
// --- SCSS Rules

div.wunderbaum * {
  box-sizing: border-box;
}

div.wunderbaum {
  height: 100%; // fill parent container
  min-height: 4px;
  background-color: var(--wb-background-color);
  margin: 0;
  padding: 0;

  font-family: var(--wb-font-stack);
  font-size: 14px;

  color: var(--wb-node-text-color);
  border: 2px solid var(--wb-border-color);
  border-radius: 4px;
  background-clip: content-box; // Keep bg color outside rounded borders?
  overflow-x: auto;
  // TODO:auto would be better, but may cause unwanted effects when auto-resizing?
  // overflow-y: auto;
  overflow-y: scroll;
  // scroll-behavior: smooth;

  // Focus border is generated by the browsers per default:
  &:focus,
  &:focus-within {
    border-color: var(--wb-focus-border-color);
    // outline-style: none;
  }

  &.wb-disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  div.wb-list-container {
    position: relative;
    // overflow: auto;
    min-height: 4px;
    // height: calc(100% - #{$header-height});  // didn't work. Using JS instead
  }

  /* --- FIXED-COLUMN --- */

  div.wb-header {
    position: sticky;
    top: 0;
    z-index: 2;
    -webkit-user-select: none; /* Safari */
    user-select: none;
  }

  div.wb-header,
  div.wb-list-container {
    overflow: unset;
  }

  // }
  // --- Header and node list ---
  div.wb-row {
    position: absolute;
    width: 100%;
    height: var(--wb-row-outer-height);
    line-height: var(--wb-row-outer-height);
    border: 1px solid transparent;
  }

  /* Fixed column must be opaque, i.e. have the bg color set. */
  &.wb-fixed-col {
    // Sticky first column (header and nodes)
    span.wb-col:first-of-type {
      position: sticky;
      left: 0;
      z-index: 1;
      background-color: var(--wb-background-color);
    }

    div.wb-header {
      span.wb-col:first-of-type {
        background-color: var(--wb-header-color);
      }
    }

    div.wb-node-list div.wb-row {
      &.wb-active span.wb-col:first-of-type,
      &.wb-selected span.wb-col:first-of-type {
        background-color: var(--wb-active-color);
      }

      &.wb-active:hover span.wb-col:first-of-type,
      &.wb-selected:hover span.wb-col:first-of-type {
        background-color: var(--wb-active-hover-color);
      }

      &:hover span.wb-col:first-of-type {
        background-color: var(--wb-hover-color);
      }
    }

    &:not(:focus-within),
    &:not(:focus) {
      div.wb-node-list div.wb-row {
        &.wb-active span.wb-col:first-of-type,
        &.wb-selected span.wb-col:first-of-type {
          background-color: var(--wb-active-color-grayscale);
          border-color: var(--wb-active-border-color-grayscale);

          &:hover span.wb-col:first-of-type {
            background-color: var(--wb-active-hover-color-grayscale);
          }
        }
      }
    }
  }

  // --- Node List Only ---

  // Dim some colors if tree has no focus
  &:not(:focus-within),
  &:not(:focus) {
    div.wb-node-list div.wb-row {
      &.wb-active,
      &.wb-selected {
        background-color: var(--wb-active-color-grayscale);
        border-color: var(--wb-active-border-color-grayscale);

        &:hover {
          background-color: var(--wb-active-hover-color-grayscale);
        }
      }
    }
  }

  &.wb-alternate div.wb-node-list {
    div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
      background-color: var(--wb-alternate-row-color);

      &:hover {
        background-color: var(--wb-alternate-row-color-hover);
      }
    }
  }

  div.wb-node-list {
    div.wb-row {
      &:hover {
        background-color: var(--wb-hover-color);
      }

      &.wb-active,
      &.wb-selected {
        background-color: var(--wb-active-color);

        // border-color: var(--wb-active-border-color);
        &:hover {
          background-color: var(--wb-active-hover-color);
          // border-color: var(--wb-active-hover-border-color);
        }
      }

      &.wb-focus:not(.wb-active) {
        border-style: dotted;
        border-color: var(--wb-active-border-color);
      }

      &.wb-active {
        // background-color: var(--wb-active-hover-color);
        border-style: solid;
        border-color: var(--wb-active-border-color);

        &:hover {
          // background-color: var(--wb-active-hover-color);
          border-color: var(--wb-active-hover-border-color);
        }
      }

      &.wb-loading {
        font-style: italic;
      }

      &.wb-busy,
      i.wb-busy,
      .wb-col.wb-busy {
        font-style: italic;

        // For our stripe pattern, we want a frictionless transition at
        // the bottom, when repeating in y-direction:
        // h: height of row = 22px
        // d: spacing between stripe pairs (white + gray)
        // Calculate the spacing that will lead to a minimal quadratic
        // pattern with a height of h pixels:
        //
        //     (2 * d)^2 = 2 * h^2
        // =>  d = sqrt(2 * h^2) / 2
        //       = 15.56px
        // We use the half distance to get a finer stripe pattern:
        //     d/2 = 7.78
        background: repeating-linear-gradient(
          45deg,
          // $hover-color,
          // $hover-color 3.88px,
          transparent,
          transparent 3.88px,
          var(--wb-grid-color) 3.88px,
          var(--wb-grid-color) 7.78px
        );
        animation: wb-busy-animation 2s linear infinite;
      }

      &.wb-error,
      &.wb-status-error {
        color: var(--wb-error-color);
      }
    }
  }

  // --- HEADER ---

  div.wb-header {
    position: sticky;
    height: var(--wb-header-height);
    border-bottom: 1px solid var(--wb-border-color);
    padding: 0;
    background-color: var(--wb-header-color);

    span.wb-col {
      font-weight: bold;
      // &::after {
      //   content: "|";
      // }
      overflow: visible; // allow resizer to overlap next col
    }

    // <span class='wb-col'> contains <span class='wb-col-title'> and <span class='wb-col-resizer'>
    span.wb-col-title {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    span.wb-col-resizer {
      position: absolute;
      top: 0;
      // left: auto;
      right: -1px;
      width: 3px;
      // float: right;
      border: none;
      border-right: 2px solid var(--wb-border-color);
      height: 100%;
      -webkit-user-select: none; // Safari
      user-select: none;
      &.wb-col-resizer-active {
        cursor: col-resize;
        // border-right-color: red;
      }
    }

    i.wb-col-icon {
      float: inline-end;
      padding-left: 2px;

      &:hover {
        cursor: pointer;
        color: var(--wb-focus-border-color);
      }
    }
  }

  span.wb-col {
    position: absolute;
    display: inline-block;
    // text-overflow: ellipsis;
    overflow: hidden;
    height: var(--wb-row-inner-height);
    line-height: var(--wb-row-inner-height);
    padding: 0 var(--wb-col-padding-x);
    border-right: 1px solid var(--wb-grid-color);
    white-space: nowrap;

    &:last-of-type {
      border-right: none;
    }
  }

  span.wb-node {
    -webkit-user-select: none; // Safari
    user-select: none;
    // &:first-of-type {
    //   margin-left: 8px; // leftmost icon gets a little margin
    // }

    i.wb-checkbox,
    i.wb-expander,
    i.wb-icon,
    i.wb-indent {
      height: var(--wb-icon-outer-height);
      width: var(--wb-icon-outer-width);
      padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
      display: inline-block;
    }

    i.wb-expander,
    i.wb-icon {
      background-repeat: no-repeat;
      background-size: contain;
    }

    /* Fix Bootstrap Icon alignment */
    i.bi::before {
      vertical-align: baseline;
    }

    img.wb-icon {
      width: var(--wb-icon-width);
      height: var(--wb-icon-height);
      padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
      // margin-top: var(--wb-icon-padding-y);
    }

    i.wb-indent {
      // border-left: 1px solid gray;
      &::before {
        content: "\00a0";
      }
    }

    i.wb-expander.wb-spin,
    i.wb-icon.wb-spin {
      height: unset; // Prevent wobble
      width: unset;
      padding: 0 3px;
      animation: wb-spin-animation 2s linear infinite;
    }

    span.wb-title {
      min-width: 1em;
      // display: inline-block; // fix vertical offset on Chrome?
      vertical-align: top;
      overflow-x: hidden;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  /* --- GRID --- */

  &.wb-grid {
    div.wb-header {
      div.wb-row {
        span.wb-col {
          &:hover {
            background-color: var(--wb-active-header-column-color);
          }
        }
      }
    }

    &.wb-cell-mode div.wb-header div.wb-row span.wb-col {
      &.wb-active {
        background-color: var(--wb-active-hover-color);
      }
    }

    div.wb-node-list div.wb-row {
      border-bottom-color: var(--wb-grid-color);

      &:hover:not(.wb-active):not(.wb-selected) {
        background-color: var(--wb-hover-color);
        // border-color: var(--wb-hover-border-color);
      }

      &.wb-active {
        border-bottom-color: var(--wb-active-border-color);
      }

      span.wb-col {
        border-right: 1px solid var(--wb-grid-color);

        input.wb-input-edit,
        > input[type="color"],
        > input[type="date"],
        > input[type="datetime"],
        > input[type="datetime-local"],
        > input[type="email"],
        > input[type="month"],
        > input[type="number"],
        > input[type="password"],
        > input[type="search"],
        > input[type="tel"],
        > input[type="text"],
        > input[type="time"],
        > input[type="url"],
        > input[type="week"],
        > select {
          width: 100%;
          max-height: var(--wb-row-inner-height);
          border: none;
        }

        > input:focus,
        > select:focus {
          border: 1px dashed $active-border-color;
        }
      }

      // input[type="number"]::-webkit-inner-spin-button,
      // input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }

    &.wb-cell-mode {
      div.wb-row:not(.wb-colspan) {
        &.wb-active {
          span.wb-col.wb-active {
            background-color: var(--wb-active-cell-color-grayscale);
          }
        }
      }
    }

    &.wb-cell-mode:focus-within,
    &.wb-cell-mode:focus {
      div.wb-row:not(.wb-colspan):not(.wb-selected) {
        // background-color: var(--wb-background-color);

        span.wb-col.wb-active {
          background-color: var(--wb-active-column-color);
        }

        &.wb-active {
          background-color: var(--wb-active-column-color);

          span.wb-col.wb-active {
            background-color: var(--wb-active-cell-color);
          }
        }
      }
    }

    &.wb-alternate div.wb-node-list {
      div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
        background-color: var(--wb-alternate-row-color);

        &:hover {
          background-color: var(--wb-alternate-row-color-hover);
        }
      }
    }

    // Dim some colors if tree has no focus
    &:not(:focus-within),
    &:not(:focus) {
      div.wb-node-list div.wb-row {
        border-bottom-color: var(--wb-grid-color-grayscale);
      }
    }
  }

  /* --- FILTER --- */

  &.wb-ext-filter-dim,
  &.wb-ext-filter-hide {
    div.wb-node-list div.wb-row {
      color: var(--wb-filter-dim-color);

      &.wb-submatch {
        color: var(--wb-filter-submatch-color);
      }

      &.wb-match {
        color: var(--wb-node-text-color);
      }
    }
  }
  // Hide expanders for nodes that don't have matching children
  &.wb-ext-filter-hide.wb-ext-filter-hide-expanders {
    div.wb-node-list div.wb-row:not(.wb-submatch) i.wb-expander {
      visibility: hidden;
    }
  }

  // /* --- INPUT controls in grid --- */
  // &.wb-lean-input div.wb-node-list div.wb-row span.wb-col {
  //   input {
  //     border-color: red;
  //   }
  // }

  /* --- DND --- */

  div.wb-row.wb-drag-source {
    opacity: 0.5;

    .wb-node {
      background-color: var(--wb-drop-source-color);
    }
  }

  div.wb-row.wb-drop-target {
    overflow: visible;

    .wb-node {
      background-color: var(--wb-drop-target-color);
      overflow: visible;

      // z-index: 1000;
      .wb-icon {
        position: relative;
        overflow: visible;

        &::after {
          // use ::after, because ::before is used by icon fonts
          // vertical-align: baseline;
          position: absolute;
          z-index: 1000;
          // TODO: should be done automatically via rollup plugin:
          // content: url(../docs/assets/drop_marker_16x32.png);
          content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
          left: 0; //-$icon-outer-width;
          top: calc(($row-outer-height - var(--wb-icon-height)) / 2);
        }
      }
    }
  }

  // div.wb-row.wb-drop-target.wb-drop-after .wb-node {
  //   border-bottom: 1px dotted #b5373b;
  //   translate: 0 3px;
  // }
  // div.wb-row.wb-drop-target.wb-drop-before .wb-node,
  // div.wb-row.wb-drop-target.wb-drop-after + div.wb-row .wb-node {
  //   border-top: 1px dotted #b5373b;
  //   translate: 0 -3px;
  // }

  div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after,
  div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
    // TODO: should be done automatically via rollup plugin:
    // content: url(../docs/assets/drop_marker_insert_16x64.png);
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
    left: 0; // $icon-outer-width * 1.5;
    top: calc(
      ($row-outer-height - var(--wb-icon-height)) / 2 - $row-outer-height / 2
    );
  }

  div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
    top: calc(
      ($row-outer-height - var(--wb-icon-height)) / 2 + $row-outer-height / 2
    );
  }

  /* --- SPECIAL EFFECTS --- */

  /* Colorize indentation levels. */
  &.wb-rainbow {
    @for $i from 1 through list.length($level-rainbow) {
      i.wb-expander:nth-child(#{list.length($level-rainbow)}n + #{$i}),
      i.wb-indent:nth-child(#{list.length($level-rainbow)}n + #{$i}) {
        background: list.nth($level-rainbow, $i);
      }
    }
  }

  /* Fade out expanders, when container is not hovered or active */
  &.wb-fade-expander {
    i.wb-expander {
      // only text-alpha is animated, since we want to keep the background color
      // transition: opacity 1.5s;
      // opacity: 0;
      transition: color 1.5s;
      color: rgba($node-text-color, 0);
    }

    div.wb-row.wb-loading i.wb-expander,
    &:hover i.wb-expander,
    &:focus i.wb-expander,
    &:focus-within i.wb-expander,
    [class*="wb-statusnode-"] i.wb-expander {
      transition: color 0.6s;
      color: var(--wb-node-text-color);
    }
  }

  /* Skeleton */
  div.wb-row.wb-skeleton {
    span.wb-title,
    i.wb-icon {
      animation: wb-skeleton-animation 1s linear infinite alternate;
      border-radius: 0.25em;
      color: transparent;
      opacity: 0.7;
      // max-width: 20px;
    }
  }

  /* Auto-hide checkboxes unless selected or hovered */
  &.wb-checkbox-auto-hide {
    i.wb-checkbox {
      visibility: hidden;
    }

    .wb-row:hover i.wb-checkbox,
    .wb-row.wb-selected i.wb-checkbox {
      visibility: unset;
    }

    &:focus,
    &:focus-within {
      .wb-row.wb-active i.wb-checkbox {
        visibility: unset;
      }
    }
  }
}

/* --- TOOL CLASSES --- */
a.wb-breadcrumb {
  cursor: pointer;
  text-decoration: none;
}

.wb-helper-center {
  text-align: center;
}

.wb-helper-disabled {
  color: var(--wb-dim-color);
}

.wb-helper-hidden {
  display: none;
}

.wb-helper-invalid {
  color: var(--wb-error-color);
}

.wb-helper-lazy-expander {
  color: var(--wb-bg-highlight-color);
}

.wb-helper-link {
  cursor: pointer;
}

.wb-no-select {
  -webkit-user-select: none; // Safari
  user-select: none;

  span.wb-title {
    -webkit-user-select: contain; // Safari
    user-select: contain;
  }
}

// .wb-helper-edit-text {
//   // content-editable: true;
// }
button.wb-filter-hide {
  font-weight: bolder;
  // background-color: var(--wb-active-color);
  // -webkit-appearance: auto; /* Removes default Safari styles */
}
/* RTL support */
.wb-helper-start,
.wb-helper-start > input {
  text-align: left;
}

.wb-helper-end,
.wb-helper-end > input {
  text-align: right;
}

.wb-rtl {
  .wb-helper-start,
  .wb-helper-start > input {
    text-align: right;
  }

  .wb-helper-end,
  .wb-helper-end > input {
    text-align: left;
  }
}

i.wb-icon {
  position: relative;

  > span.wb-badge {
    position: absolute;
    display: inline-block;
    top: 0;
    left: -0.6rem;
    color: white; //var(--wb-dim-color);
    background-color: var(--wb-bg-highlight-color);
    padding: 0.2em 0.3rem 0.1em 0.3rem;
    font-size: 60%;
    font-weight: 200;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    // vertical-align: baseline;
    border-radius: 0.5rem;
    pointer-events: none;
  }
}

/* Class 'wb-tristate' is used to mark checkboxes that should toggle like
 *   indeterminate -> checked -> unchecked -> indeterminate ...
 */
// input[type=checkbox].wb-tristate {
// }
// tri-state checkbox in indeterminate state
.wb-col input[type="checkbox"]:indeterminate {
  color: var(--wb-dim-color);
  background-color: red;
}

.wb-col input:invalid {
  // border-color: var(--wb-error-color);
  // color: var(--wb-error-color);
  background-color: var(--wb-error-background-color);
}

.wb-col.wb-invalid {
  border: 1px dotted var(--wb-error-color);
  // color: var(--wb-error-color);
  // background-color: var(--wb-error-background-color);
}

@keyframes wb-spin-animation {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes wb-skeleton-animation {
  0% {
    background-color: hsl(200, 20%, 70%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

@keyframes wb-busy-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 $row-outer-height;
  }
}