@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

$toolbar-button-width: 44px;

#logo {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 8px;
  background: $col-editor;
  box-sizing: border-box;
  transition: .5s background ease-out;

  &:hover {
    background: lighten($col-editor, 5%);
    transition: .1s background ease-in-out;
  }

  img {
    width: 16px;
    height: 16px;
    fill: white;
    transition: .5s top ease-out;
  }
}

#toolbar {
  display: grid;
  height: $toolbar-height;
  padding: 0;
  margin: 0;
  color: var(--t-fg-highlight);
  background-color: var(--t-bg-default);
  grid-area: toolbar;
  grid-template-columns: 1fr minmax(260px, 1fr) 1fr;

  hr {
    height: 1px;
    padding: 0;
    margin: 0;
    background-color: var(--t-fg-dim);
    border: none;
    opacity: .25;
  }

  .left, .center, .right {
    display: flex;
  }

  .center {
    justify-content: center;
    padding-inline: $spacing-2;
  }

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

  // The toggle switch - box around the slider "dot"
  .switch {
    position: absolute;
    top: 20%;
    right: $spacing-1;
    width: 14px;
    height: 8px;

    .slider {
      position: absolute;
      cursor: pointer;
      border-radius: $rounded-pill;
      outline: 1px solid var(--t-fg-dim);
      transition: outline .3s;
      inset: 0;

      &::before {
        content: '';
        position: absolute;
        bottom: 1px;
        left: 1px;
        width: 6px;
        height: 6px;
        background-color: var(--t-fg-dim);
        border-radius: inherit;
        transition: left .3s, background-color .3s;
      }
    }
  }

  button svg {
    width: 18px;
    height: 18px;
  }

  // Buttons directly on toolbar, inside .right, .center or .left
  > div > button, > div > div > #themeSwitchButton {
    width: $toolbar-button-width;
    color: var(--t-fg-default);
    text-align: center;
    transition: background-color .3s ease-in-out;

    &#newPlayerNode {
      color: $col-node-player;
    }

    &#newComputerNode {
      color: $col-node-computer;
    }

    &#newSituationNode {
      color: $col-node-situation;
    }

    &:enabled:hover {
      background-color: var(--t-bg-dim);
    }

    &.buttonSwitch {
      position: relative;

      svg {
        margin-left: -$spacing-1;
      }

      &.enabled .slider {
        outline-color: var(--t-fg-highlight);

        &::before {
          left: calc(100% - 6px - 1px);
          background-color: var(--t-fg-highlight);
        }
      }
    }

    &:disabled {
      display: none;
    }
  }

  > div > .splitButton {
    &.disabled {
      display: none;
      pointer-events: none;
    }

    &:not(.disabled):hover .buttons {
      background-color: var(--t-bg-dim);
    }

    .buttons {
      display: flex;
      justify-content: center;
      width: $toolbar-button-width + $spacing-2;
      height: 100%;
      color: var(--t-fg-default);
      transition: background-color .2s ease-in-out;

      button, .dropdownButton {
        padding-inline: 0;
        color: inherit;
      }

      button:not(.dropdownButton) {
        padding-left: $spacing-2;
      }

      .dropdownButton svg {
        width: 24px;
        height: 24px;
      }
    }
  }

  #themeSwitchDropdown > button {
    // The toggle switch - box around the slider "dot"

    .switch {
      position: relative;
      top: unset;
      right: unset;
      width: 36px;
      height: 20px;
      margin-left: auto;

      .slider::before {
        bottom: 2px;
        left: 4px;
        width: 16px;
        height: 16px;
        background-color: var(--t-fg-dim);
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center;
      }
    }

    &.enabled .slider {
      outline-color: var(--t-fg-highlight);

      &::before {
        left: calc(100% - 18px - 1px);
        background-color: var(--t-fg-highlight);
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /></svg>');
      }
    }
  }

  .dropdown {
    width: auto;
    height: 100%;
    margin-top: 0;
    border-radius: 0;

    button {
      width: 100%;
      height: 100%;

      &#fileButton, &#scenarioButton {
        color: white;
        padding-inline: $spacing-3;
      }

      &#fileButton {
        background-color: $col-editor;
      }

      &#scenarioButton {
        background-color: darken($col-editor, 12%);
      }
    }

    .dropdownItems {
      position: absolute;
      z-index: 200;
      display: none;
      width: auto;
      height: auto;
      min-width: 170px;
      margin-top: $spacing-2;
      color: var(--t-fg-default);
      background: var(--t-bg-default);
      box-shadow: $shadow-md-soft;
      box-sizing: border-box;

      // top arrow of the dropdown
      &::before {
        content: '';
        position: absolute;
        top: -$spacing-2;
        left: 16%;
        width: 0;
        height: 0;
        border: $spacing-2 solid transparent;
        border-top: none;
        border-bottom-color: var(--t-bg-default);
        transform: translateX(-50%);
      }

      button {
        justify-content: flex-start;
        padding: $spacing-3 $spacing-2;
        color: inherit;
        white-space: nowrap;
        gap: $spacing-2;

        &:enabled:hover {
          background-color: var(--t-bg-dim);
        }

        &:disabled {
          opacity: .3;
        }

        svg {
          flex-shrink: 0;
        }
      }

      span, kbd {
        margin-left: auto;

        + span, kbd {
          margin-left: $spacing-1;
        }
      }

      kbd {
        padding: 2px $spacing-1;
        opacity: .8;
      }

      .flexbox button {
        // If the first button has any enabled addChildButtons next to it
        &:has(~ button.addChildButton:enabled) {
          padding: $spacing-2 $spacing-1;
          margin: $spacing-1;
          border-radius: $rounded-base;
        }

        &.addChildButton {
          @include nodeTypeBackgroundColor;

          flex: 0 0 auto;
          width: 18px;
          height: 18px;
          padding: 0 !important;
          margin: 0 !important;
          border-radius: $rounded-pill !important;

          &:disabled {
            display: none;
          }

          &:last-child {
            margin-right: $spacing-2 !important;
          }
        }
      }
    }
  }
}

#breadcrumbs {
  $min-width: 30px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-1 $spacing-2;
  overflow: hidden;
  font-size: .9em;
  grid-area: breadcrumbs;
  gap: 2px;

  .scenarioName, .subjectName {
    flex: 0 1 auto;
    min-width: $min-width;
    font-weight: 600;
    white-space: nowrap;

    &:not(.editing) {
      > span:hover {
        background-color: rgba($col-editor, .1);
        border-color: $col-editor;
      }
    }

    > span {
      display: inline-block;
      min-width: $min-width;
      max-width: 100%;
      padding: 0 $spacing-1;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 4px;
      box-sizing: border-box;
      user-select: none;

      &:empty {
        min-height: 1.25em;
        text-align: center;
        background-color: rgba($col-editor, .1);
        border-color: $col-editor;

        &::after {
          content: '...';
        }
      }
    }
  }

  .slashDivider {
    flex-shrink: 0;
    opacity: .5;
  }

  .editing {
    width: 100%;
  }

  .scenarioName {
    flex-shrink: 2;
  }

  // Dims scenario name when in subject
  &.zoomed .scenarioName {
    font-weight: 400;
    opacity: .65;
  }
}

#export {
  position: relative;

  @keyframes fade {
    to { opacity: 0; }
  }

  &.unsavedChanges::before {
    content: '';
    position: absolute;
    top: $spacing-3;
    left: $spacing-2;
    z-index: 1;
    width: 8px;
    height: 8px;
    background: $col-negative;
    border: 2px solid var(--t-bg-default);
    border-radius: 100%;

    .saving & {
      animation: fade 1s infinite alternate;
    }
  }
}

#languages {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
