/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 3.1.0.4.
 ** Copyright (c) 2026 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.description-panel #layout-description-container {
  border-radius: 8px;
  padding: 16px;
  margin: 0 -8px;
}

.interaction-panel.advanced-editor {
  --border-radius: 16px;
  --small-padding: 8px;
  --panel-min-width: 280px;

  padding-inline: 0;
  /*flex: 0 1 var(--panel-width);*/
  min-width: var(--panel-min-width);
}

.advanced-editor {
  > .content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--small-padding);

    overflow: hidden;

    > * {
      flex: 0 0 auto;
    }

    .scroll.scrollbar {
      flex: 1;
      min-height: 0;
      overflow: auto;

      /* The heading of this block is outside the element to prevent it from scrolling,
        so we must revert the flex gap */
      margin-block-start: calc(-1 * var(--small-padding));
    }
  }

  .button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

.option-ui-content-container {
  overflow-y: visible;
  padding: 6px;
}

.data-editor-header {
  padding: 0 var(--small-padding);

  h2 {
    margin-top: 0 !important;
  }

  .content {
    display: flex;
    margin-bottom: var(--small-padding);
    justify-content: space-evenly;
  }

  select:not(.demo-disabled),
  select:not(.demo-disabled):hover {
    border-color: #888;
    border-width: 1px;
  }

  button:disabled {
    opacity: 0.5;
  }
}

#sample-select-box,
.sidebar-select-box {
  font-size: 14px;
  width: 100%;
  margin: 0 4px;
}

#sample-select-box {
  grid-area: mid;
}

#data-editor {
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.scroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.main-container .interaction-panel .option-ui-button {
  background: var(--toolbar-button) !important;
  color: var(--toolbar-button-text);
  border-radius: 10px;
  height: 30px;
  letter-spacing: 1px;
  align-content: center;
  padding-left: 3px;
}

#reset-layout-button:hover {
  box-shadow: 0 0 100px 100px rgba(0, 0, 0, 0.1) inset;
}

.option-presets-button-grid {
  display: grid;
  align-items: center;
  grid-template-columns: 50% 50%;
  padding: 3px 8px;
  row-gap: 8px;
}

#data-presets {
  margin: 5px 0 8px 0;
}

.data-editor-tab-title {
  display: flex;
  line-height: 2em;
  background: var(--toolbar-button);
  color: var(--toolbar-button-text);
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  align-items: center;
  padding: 6px 8px;
  margin: 0 6px;
  border: none;
  border-radius: 10px;
}

.presets-icon {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20x='0px'%20y='0px'%20width='16px'%20height='16px'%20viewBox='0%200%2016%2016'%20enable-background='new%200%200%2016%2016'%20xml:space='preserve'%3e%3cg%3e%3cpath%20fill='%23ffffff'%20d='M8,3C5.239,3,3,5.239,3,8c0,2.762,2.239,5,5,5c2.762,0,5-2.238,5-5C13,5.239,10.762,3,8,3%20z%20M8,11c-1.657,0-3-1.344-3-3c0-1.657,1.343-3,3-3c1.656,0,3,1.343,3,3C11,9.656,9.656,11,8,11z'/%3e%3cpath%20fill='%23ffffff'%20d='M8,2C4.687,2,2,4.687,2,8s2.687,6,6,6s6-2.687,6-6S11.313,2,8,2z%20M8,11c-1.657,0-3-1.344-3-3%20c0-1.657,1.343-3,3-3c1.656,0,3,1.343,3,3C11,9.656,9.656,11,8,11z'/%3e%3crect%20x='6.5'%20y='12'%20width='3'%20height='4'%20fill='%23ffffff'%3e%3c/rect%3e%3crect%20x='12'%20y='6.51'%20width='4'%20height='3'%20fill='%23ffffff'%3e%3c/rect%3e%3crect%20x='6.5'%20y='0'%20width='3'%20height='3'%20fill='%23ffffff'%3e%3c/rect%3e%3crect%20x='0'%20y='6.504'%20width='3'%20height='4'%20fill='%23ffffff'%3e%3c/rect%3e%3crect%20x='2.257'%20y='10.243'%20width='3'%20height='4'%20fill='%23ffffff'%20transform='matrix(0.7071%200.7071%20-0.7071%200.7071%209.7574%200.929)'%3e%3c/rect%3e%3crect%20x='10.235'%20y='10.75'%20width='4'%20height='3'%20fill='%23ffffff'%20transform='matrix(0.707%200.7072%20-0.7072%200.707%2012.2484%20-5.0639)'%3e%3c/rect%3e%3crect%20x='11.096'%20y='1.904'%20width='3'%20height='3'%20fill='%23ffffff'%20transform='matrix(0.7073%200.7069%20-0.7069%200.7073%206.0937%20-7.9087)'%3e%3c/rect%3e%3crect%20x='1.755'%20y='2.26'%20width='4'%20height='3'%20fill='%23ffffff'%20transform='matrix(0.7071%200.7071%20-0.7071%200.7071%203.7584%20-1.5535)'%3e%3c/rect%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 16px;
  width: 20px;
  height: 28px;
  display: inline-block;
  margin: 0 10px 0 2px;
}

.interaction-panel .option-presets-button {
  position: relative;
  margin: 4px;
  border-radius: 999px;
  height: 100%;
  padding: 2px 5px;
  overflow: visible;
  transition:
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-presets-button:disabled,
.invalid-preset {
  cursor: default;
  opacity: 0.5;
}

.option-presets-button:not(:disabled):hover {
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.25) inset;
}

.active-preset {
  background-color: var(--color-highlight-blue) !important;
}

.active-preset:after {
  content: '';
  background-image: url("data:image/svg+xml,%3csvg%20width='19.57'%20height='19.57'%20viewBox='0%200%205.178%205.178'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(-44.233%20-91.22)'%3e%3ccircle%20cx='46.821'%20cy='93.809'%20r='2.589'%20fill='%23f7f7f7'/%3e%3cpath%20d='M46.822%2091.693a2.117%202.117%200%20100%204.233%202.117%202.117%200%20000-4.233zm1.323%201.984l-1.588%201.587-1.058-1.058v-1.058l1.058%201.058%201.588-1.587z'%20fill='%2386bbd8'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-left: 8px;
  vertical-align: bottom;
  position: absolute;
  right: -8px;
  top: -6px;
}

.value-changed {
  position: relative;
  box-shadow: 0 0 0 2px var(--color-highlight-blue) inset;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-changed-icon {
  position: absolute;
  left: -2px;
  top: -8px;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='30px'%20height='30px'%20version='1.1'%20viewBox='0%200%2030%2030'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(-66,-117)'%3e%3ccircle%20cx='81'%20cy='132'%20r='15'%20fill='%23f7f7f7'/%3e%3ccircle%20cx='81'%20cy='132'%20r='12'%20fill='%232196F3'/%3e%3cg%20transform='matrix(1.1667%200%200%201.1667%2071.083%20103.42)'%20stroke='%23f7f7f7'%20stroke-miterlimit='10'%20stroke-width='1.5'%20stroke-linecap='round'%3e%3cline%20x1='2.5'%20x2='14.5'%20y1='24.5'%20y2='24.5'/%3e%3cline%20x1='8.5'%20x2='8.5'%20y1='18.5'%20y2='30.5'/%3e%3cline%20x1='4.257'%20x2='12.742'%20y1='20.258'%20y2='28.742'/%3e%3cline%20x1='12.742'%20x2='4.257'%20y1='20.258'%20y2='28.742'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 18px;
  width: 18px;
  height: 18px;
  display: block;
}

.editor-preset .value-changed {
  box-shadow: 0 0 0 2px var(--color-highlight-blue) inset;
}

.editor-preset .value-changed-icon {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='30px'%20height='30px'%20version='1.1'%20viewBox='0%200%2030%2030'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(-66,-117)'%3e%3ccircle%20cx='81'%20cy='132'%20r='15'%20fill='%23f7f7f7'/%3e%3ccircle%20cx='81'%20cy='132'%20r='12'%20fill='%2386bbd8'/%3e%3cg%20transform='matrix(1.1667%200%200%201.1667%2071.083%20103.42)'%20stroke='%23f7f7f7'%20stroke-miterlimit='10'%20stroke-width='1.5'%20stroke-linecap='round'%3e%3cline%20x1='2.5'%20x2='14.5'%20y1='24.5'%20y2='24.5'/%3e%3cline%20x1='8.5'%20x2='8.5'%20y1='18.5'%20y2='30.5'/%3e%3cline%20x1='4.257'%20x2='12.742'%20y1='20.258'%20y2='28.742'/%3e%3cline%20x1='12.742'%20x2='4.257'%20y1='20.258'%20y2='28.742'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

#preset-tooltip {
  position: absolute;
  display: none;
  opacity: 0;
  z-index: 100;
  width: 98%;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  padding: 0 18px;
  box-sizing: border-box;
  background: #dadada;
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;

  * {
    color: rgba(0, 0, 0, 0.87);
  }

  &.active {
    background-color: var(--color-highlight-blue);
  }

  &.active * {
    color: #fff !important;
  }

  &.active .triangle {
    border-bottom-color: var(--color-highlight-blue);
  }

  &.visible {
    opacity: 1;
  }

  .triangle {
    position: absolute;
    top: -11px;
    width: 0;
    height: 0;
    display: block;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #dadada;
  }

  .preset-tooltip-dummy {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
}

.yfiles-canvascomponent {
  --yfiles-theme-scale: 1;
}

.ng-isolate-scope {
  color: var(--color-text);
  background-color: var(--description-bg);
  margin-top: 1px;
}
.option-ui-collapse {
  background-color: var(--description-bg);
}

.option-ui-form-group {
  border-top: none !important;
}

.option-ui-form-group.collapsed {
  margin-bottom: 2px;
  padding-bottom: 0;
}

input[type='range']::-webkit-slider-thumb,
input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: var(--color-text);
}
input[type='range'] {
  background: var(--description-bg);
}

.option-ui-button[data-ng-disabled='disabled'] {
  background-color: transparent;
}

#apply-layout-button {
  background: var(--color-highlight-blue) !important;
  &:hover {
    box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.25) inset;
  }
}