@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

:where(#sidebar) {
  $sidebar-control-min-width: 30px;

  position: relative;
  width: $sidebar-width;
  min-width: 0;
  min-height: 0;
  font-size: 11pt;
  color: var(--t-fg-default);
  background-color: var(--t-bg-default);
  grid-area: sidebar;

  input, textarea, select, button {
    color-scheme: light;
  }

  // form input, textarea, select
  input[type=text], textarea {
    color: var(--t-fg-highlight);
    background-color: var(--t-bg-contrast);
    border-color: var(--t-bg-dim);
  }

  textarea {
    resize: vertical;
  }

  button {
    color: var(--theme-fg-sidebar-button);
    background-color: var(--theme-bg-sidebar-button);

    &.add-item svg {
      fill: $col-editor;
    }

    &.add-item, &.delete {
      padding: $spacing-0;
      background-color: transparent;

      svg {
        width: 20px;
        height: 20px;
      }
    }
  }

  #sidebarType {
    position: absolute;
    top: $spacing-20;
    left: -$spacing-10;
    z-index: 100;
    border-radius: $rounded-lg 0 0 $rounded-lg;
    box-shadow: inset -2px 0 10px rgba(#000, .1);

    &.tree { background-color: $col-subject; }
    &.player { background-color: $col-node-player; }
    &.computer { background-color: $col-node-computer; }
    &.situation { background-color: $col-node-situation; }

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 28px;
      padding: $spacing-1;

      svg {
        width: 24px;
        height: 24px;
        fill: white;
        vertical-align: middle;
      }
    }
  }

  .sidebarContent {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    box-shadow: $shadow-md-soft;
  }

  .grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    z-index: 100;
    width: 10px;
    cursor: ew-resize;
    background: black;
    opacity: 0;

    &:hover {
      opacity: .25;
      transition: 0s opacity .1s linear;
    }
  }

  &.dragging > * {
    opacity: .5;
  }

  .inputgroup {
    display: flex;
    gap: $spacing-1;
    align-items: center;

    button {
      padding: $spacing-1;
    }
  }

  // This is the class for sections for property values and parameter effects
  .section {
    display: contents;
  }

  .collapsable {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    // Needed for button inside ' <div id="effectsSection"></div> in editorView.php ' to avoid being full width
    button {
      width: max-content;
    }
  }

  // This is the class for subsections for property values and parameter effects
  .subsection {
    margin-bottom: $spacing-4;
    margin-left: $spacing-4;
  }

  label {
    line-height: 1.6;
    user-select: none;
  }

  .parameter-effect, .condition:not(.groupcondition) {
    display: flex;
    align-items: center;
    margin-bottom: $spacing-1;
    overflow: hidden;
    gap: $spacing-1;

    &:last-child {
      margin-bottom: $spacing-2;
    }

    span, .inputgroup, .parameter-effect-container {
      display: flex;
      align-items: center;
      gap: $spacing-1;
    }

    .handle, > select, span, .inputgroup > select {
      flex: 0 0 auto;
      overflow: hidden;
    }

    .parameter-effect-container,
    .parameter-effect-value-container {
      min-width: auto;
    }

    input[type=number] {
      flex-grow: 1;
    }

    .parameter-idref-select {
      flex: 1 1 auto !important;
      min-width: $sidebar-control-min-width;
    }
  }

  .buttonsWrapper {
    margin-top: $spacing-2;
    margin-bottom: $spacing-1;
  }
}

#sidebar {
  .sidebarShrinkExpand svg.expand {
    display: none;
  }

  &.collapsed {
    .sidebarShrinkExpand svg.shrink {
      display: none;
    }

    .sidebarShrinkExpand svg.expand {
      display: block;
    }
  }

  #sidebarType {
    cursor: pointer;

    .sidebarShrinkExpand {
      display: none;
    }

    &:hover {
      // Hide all other icons in the sidebar that display node type
      .header {
        display: none;
      }

      // Show the shrink/expand icon
      .sidebarShrinkExpand {
        display: flex;
      }
    }
  }
}

#properties, #sidebarType {
  &.player, &.situation, &.tree {
    > {
      #headerComputer, #characterSection {
        display: none;
      }
    }
  }

  &.player, &.situation, &.computer {
    > {
      #headerSubject {
        display: none;
      }
    }
  }

  &.player > {
    #headerSituation {
      display: none;
    }
  }

  &.situation > {
    #headerPlayer {
      display: none;
    }
  }

  &.computer > {
    #headerPlayer, #headerSituation {
      display: none;
    }
  }

  &.tree > {
    #headerPlayer,
    #headerSituation,
    #preconditionsSection,
    #effectsSection,
    #propertyValuesSection {
      display: none;
    }
  }
}

.header {
  h1 {
    margin: 0;
    overflow: hidden;
    font-size: 1.25em;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
  }

  img {
    margin-right: $spacing-3;
    vertical-align: middle;
  }
}

.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--t-fg-highlight);

  h2 {
    margin: 0;
    overflow: hidden;
    font-size: 1.1em;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;

    label {
      line-height: 1em;
      vertical-align: middle;
    }
  }

  img {
    margin-right: 5px;
    vertical-align: middle;
  }
}

.sidebarSection {
  display: flex;
  flex-direction: column;
  padding: $spacing-3;
  border-top: 1px solid var(--theme-sidebar-section-border);
  gap: $spacing-3;

  &:last-child {
    padding-bottom: $spacing-6;
  }

  h3 {
    margin-block: .5em;
    font-size: .9em;
    font-weight: 600;
    user-select: none;
  }
}

.sidebarRow {
  // These are not present in our current config
  ul.listType {
    margin-block-start: $spacing-1;
    margin-block-end: 0;
  }

  li:first-of-type + div {
    display: block;
    margin-bottom: $spacing-1;
  }
  // *******************************************

  .buttonIcon {
    margin-left: auto;
    color: $slate-400;

    svg {
      width: 20px;
      height: 20px;
    }
  }
}

#propertyValuesSection,
#characterSection {
  table {
    width: 100%;
    table-layout: fixed;
  }

  th {
    width: 30%;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
  }

  td {
    text-align: left;
    word-wrap: break-word;
    vertical-align: top;

    + th {
      width: 70%;
    }

    input, select, textarea {
      width: 100%;
      box-sizing: border-box;
    }
  }

  tr {
    border-bottom: 1px solid black;
  }
}

#preconditionsSection {
  white-space: nowrap;
}

.clicktag {
  padding: 0;
  opacity: .7;

  &:enabled:hover {
    opacity: 1;
  }

  svg {
    width: 20px;
    height: 20px;
  }
}
