@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

@mixin elementListLabel($kind, $color) {
  &.#{$kind} {
    background-color: rgba($color, .2);
    border-color: $color;

    svg {
      width: 18px;
      height: 18px;
      fill: $color;
    }

    &.selectedType {
      background-color: $color;

      &:hover { opacity: 1; }

      svg { fill: white; }
    }
  }
}

// used for buttons in the ul list and the header controls
#tabDock .typeButtons, #tabDock #elementList {
  button, .label {
    @include elementListLabel('computer', $col-node-computer);
    @include elementListLabel('player', $col-node-player);
    @include elementListLabel('situation', $col-node-situation);

    padding: $spacing-1;
    border-radius: $rounded-pill;
  }
}

#tabDock {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-height: $tab-dock-height;
  color: var(--t-fg-highlight);
  background-color: var(--t-bg-default);
  grid-area: tab-dock;

  &.closed {
    height: auto !important; // Ignore user set height

    .header .tabs > button {
      opacity: 1;
    }

    .grip {
      display: none;
    }
  }

  &:not(.closed) .content {
    padding-block: $spacing-1;
  }

  // .tabs buttons & buttons inside td, li
  button {
    color: var(--t-fg-highlight);
  }

  .grip {
    position: absolute;
    top: -$spacing-1;
    right: 0;
    left: 0;
    z-index: 100;
    height: 10px;
    cursor: ns-resize;
    background: var(--t-bg-dim);
    opacity: 0;

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

  .header {
    display: flex;
    align-items: center;
    height: $tab-dock-height;
    background-color: inherit;
    gap: $spacing-1;
    padding-inline: $spacing-1;
    box-shadow: $shadow-md-soft;

    .tabs {
      height: 100%;
      margin-inline: 0;

      > button {
        position: relative;
        height: 100%;
        padding: $spacing-1;
        color: var(--t-fg-highlight);
        border-bottom: 2px solid transparent;
        opacity: .4;

        &:hover {
          opacity: .7;
        }

        &.active {
          border-bottom: 2px solid var(--t-fg-dim);
          opacity: 1;
        }
      }
    }

    .controls {
      display: flex;
      align-items: center;
      margin-left: auto;
      gap: $spacing-2;

      button {
        color: var(--t-fg-dim);

        &.active {
          color: $col-editor;
        }
      }

      select {
        min-height: $spacing-6;
        padding: 2px;

        &#element-list-parameter-select {
          max-width: 240px;
        }
      }
    }

    #closeTabDock {
      padding: 2px;
    }
  }

  > .content {
    position: relative;
    flex: 1;
    overflow: auto;
    font-size: .9em;

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

    td, ul {
      svg {
        width: 18px;
        height: 18px;
      }

      .label {
        display: flex;
        align-items: center;
        border-style: solid;
        border-width: 1px;
        border-radius: $rounded-pill;
      }
    }

    #elementList .label {
      margin-inline-end: $spacing-1;
    }

    > div, ul {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;
      fill: var(--t-fg-highlight);

      li {
        min-height: $spacing-7;
        padding: $spacing-1 $spacing-2;
      }

      // Icons at end of rows
      .actionsContainer, .nodeIcons {
        display: flex;
        justify-content: flex-end;
        gap: $spacing-1;
      }
    }
  }
}
