/**
 * 3D Foundation Project
 * Copyright 2025 Smithsonian Institution
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

////////////////////////////////////////////////////////////////////////////////

@use "sass:color";
@use "../explorer/styles" as explorer;
@use "../../../../libs/ff-scene/source/ui/styles" as scene;
@use "../../../../libs/ff-ui/source/styles/styles" as common;

////////////////////////////////////////////////////////////////////////////////
// COMPONENTS

.ff-list {
  .ff-icon {
    height: 1em;
    width: 1.2em;
    margin-right: 4px;
  }
}

.ff-table {
  table, th, tbody {
    border: 0px;
  }
}

.ff-popup {
  @include common.font-ui-normal;
  font-size: 16px;
  color: common.$color-text;
}

////////////////////////////////////////////////////////////////////////////////
// EXPLORER OVERRIDES

.sv-annotation {
  // ensure annotations are always clickable in story tool
  pointer-events: auto !important;
}

////////////////////////////////////////////////////////////////////////////////
// MAIN VIEW

voyager-story {
  @include common.fullsize;
  @include common.font-ui-normal;
  font-size: 16px; //0.85rem;
  line-height: 1.35;
}

ff-dock-view {
  flex: 1 1 auto;
  font-size: 0.85em;
}

ff-tab-header, ff-dock-panel-header {
  .ff-text {
    display: inline;
  }

  .ff-icon {
    height: 0.94em;
  }

  label {
    font-weight: normal;
  }
}

////////////////////////////////////////////////////////////////////////////////
// MENU/TASK BAR

.sv-task-bar {
  display: flex;
  background-color: common.$color-background-dark;
  border-bottom: 3px solid common.$color-background-darker;

  overflow: auto;

  .ff-group {
    align-items: stretch;
  }

  .sv-story-logo {
    height: 28px !important; 
    margin: 8px;
    align-self: center;
  }

  .sv-mode {
    font-size: 16px;
    font-weight: bold;
    align-self: center;
    padding: 0 4px 2px 4px;
    margin: 4px;
    background-color: color.adjust(common.$color-secondary, $lightness: -5%);
    color: common.$color-background-dark;
  }

  .sv-spacer {
    flex: 1 1 auto;
  }

  .sv-divider {
    width: 1px;
    background-color: common.$color-background-light;
  }

  .ff-button {
    background-color: transparent;
    padding: 4px 10px;
    font-size: 13px;

    .ff-icon {
      height: 20px;
      fill: common.$color-icon;
    }

    &[selected] {
      background-color: common.$color-primary;
      color: common.$color-text-light;

      .ff-icon {
        fill: common.$color-text-light;
      }
    }
  }

  .sv-property-view .sv-property {
    font-size: 0.85em;
    display: block;
    align-self: flex-end;
  }
}

////////////////////////////////////////////////////////////////////////////////
// NAVIGATOR

$color-component-scene-dark: #202329;
$color-component-scene: #334b80;
$color-component-scene-light: #5278cc;
$color-component-model-dark: #1c2423;
$color-component-model: #26806c;
$color-component-model-light: #3dccab;
$color-component-camera-dark: #2e2424;
$color-component-camera: #802626;
$color-component-camera-light: #cc3d3d;
$color-component-light-dark: #2b2922;
$color-component-light: #806e33;
$color-component-light-light: #ccad52;
$color-component-meta-light: #d9d998;

.sv-node-tree {
  .ff-tree-node-container {
    border-color: color.adjust(common.$color-background-light, $lightness: -2%);
  }
  .ff-tree-node {
    &.ff-inner, &.ff-leaf {
      background-color: color.adjust(common.$color-background-dark, $lightness: -2%);
      border-left: 1px solid common.$color-background-light;
    }

    &.sv-node-scene {
      background-color: $color-component-scene-dark;
      border-left: 1px solid $color-component-scene;
    }
    &.sv-node-model {
      background-color: $color-component-model-dark;
      border-left: 1px solid $color-component-model;
    }
    &.sv-node-camera {
      background-color: $color-component-camera-dark;
      border-left: 1px solid $color-component-camera;
    }
    &.sv-node-light {
      background-color: $color-component-light-dark;
      border-left: 1px solid $color-component-light;

      &.disabled {
        color: gray;
      }
    }
    &[selected] {
      background-color: common.$color-primary;
    }

    .ff-header {
      display: flex;
      line-height: 1.6em;
      .ff-icon {
        height: 1.1em;
        margin: 2px 4px 0 0;
      }
      
      .ff-text {
        flex: 1 1 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .sv-add-light-btn.ff-button, .sv-delete-light-btn.ff-button {
        height: 1.6em;
        margin-left: 4px;
        display: inline-flex;
        --ff-button-bg: transparent;
        --ff-button-color: $color-component-light-light;
        .ff-icon {
          margin: 0 0 5px 0;
          height: 1em;
        }
        &:hover {
          background: rgba($color-component-light-light, 0.15);
          border-color: rgba($color-component-light-light, 0.3);
        }
      }
      .sv-add-light-btn.ff-button {
        width: 1.6em; // square button roughly same height as line-height       
        padding: 0;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;        
      }
      .sv-delete-light-btn.ff-button {
        padding: 0 5px 0 5px;
        margin-right: 4px;
        background: inherit;
        border: none;
      }
      .sv-icon-scene {
        fill: $color-component-scene-light;
      }
      .sv-icon-model {
        fill: $color-component-model-light;
      }
      .sv-icon-light {
        fill: $color-component-light-light;
      }
      .sv-icon-camera {
        fill: $color-component-camera-light;
      }
      .sv-icon-meta {
        fill: $color-component-meta-light;
      }
      .sv-icon-disabled {
        fill: gray;
      }
    }
    .ff-content {
      margin-left: 14px; // indent
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// Style for Light menus

.sv-light-menu {
  width: 300px;
  max-width: 90%;
  min-height: 180px;
  padding: 12px;
  background: common.$color-background;
  box-sizing: content-box;
  pointer-events: auto;

  .ff-flex-column {
    padding: 0 1em;
    justify-content: space-evenly;
  }

  .ff-title {
    padding: 0.4em 0 0.6em 0;
    font-size: 1.1em;
    font-weight: 600;
    color: common.$color-text-light;
  }

  .ff-flex-row {
    margin-bottom: 12px;
    align-items: center;
    gap: 8px;

    &:last-child {
      margin-bottom: 16px;
      margin-top: 16px;
      justify-content: space-between;
    }
  }

  .ff-dropdown {
    flex: 1 1 auto;
    
    select.ff-input {
      width: 100%;
      background: common.$color-background-darker;
      color: common.$color-text-light;
      border: 1px solid rgba($color-component-light-light, 0.4);
      border-radius: 3px;
      padding: 6px 8px;
      font-size: 0.95em;

      &:focus {
        outline: none;
        border-color: $color-component-light-light;
        box-shadow: 0 0 0 1px rgba($color-component-light-light, 0.6);
      }
    }
  }

  .ff-label {
    color: common.$color-text-light;
    font-weight: 500;
    min-width: 45px;
  }

  input.ff-input {
    flex: 1 1 auto;
    background: common.$color-background-darker;
    color: common.$color-text-light;
    border: 1px solid rgba($color-component-light-light, 0.4);
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 0.95em;
    text-align: right;

    &:focus {
      outline: none;
      border-color: $color-component-light-light;
      box-shadow: 0 0 0 1px rgba($color-component-light-light, 0.6);
    }
  }

  .ff-button {
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 0.9em;

    &.ff-control {
      background: $color-component-light;
      color: common.$color-background;
      border: none;

      &:hover {
        background: color.adjust($color-component-light, $lightness: -10%);
      }
    }

    &.ff-close-button {
      background: transparent;
      color: common.$color-text;
      border: 1px solid rgba(common.$color-text, 0.3);

      &:hover {
        background: rgba(common.$color-text, 0.1);
        border-color: rgba(common.$color-text, 0.5);
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// PANELS

.sv-detail-view {
  padding: 6px;

  .sv-indent {
    margin-left: 15px;
  }
}

.sv-collection-panel {
  padding: 6px;

  .sv-indent {
    margin: 2px 2px 2px 15px;
  }
}

.sv-tour-feature-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  padding: 12px;

  .ff-button {
    flex-grow: 0;
    margin: 4px;
    padding: 6px 16px;
    background-color: common.$color-background;

    &[disabled] {
      background-color: common.$color-primary-dark;
    }
  }
}

.sv-notes-panel {
  .ff-text-edit, .ff-line-edit {
    margin: 2px 0;
  }
}

.sv-panel {
  display: flex;
  flex-direction: column;
}

.sv-panel-header {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 3px 1px;
  background-color: common.$color-background;
  color: common.$color-icon;

  .ff-button {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    padding: 2px 6px;
    background-color: transparent;
  }

  & > .ff-icon {
    height: 1.2em;
    padding: 4px 4px;
    box-sizing: content-box;
  }
}

.sv-panel-content {
  flex: 1 1 auto;
  position: relative;

  .sv-commands {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 2px;

    .ff-button {
      margin: 2px;
    }
  }
}

.sv-panel-section {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;

  &:first-child {
    border-bottom: 2px solid common.$color-background-darker;
  }
}

.sv-panel-locks {
  padding: 0;
  font-size: 0.9em;

  .ff-button-group {
    display: flex;
  }

  .ff-button {
    padding: 0 4px;
    color: common.$color-text;
  }
}

//.sv-dialog {
//  padding: 4px;
//}

////////////////////////////////////////////////////////////////////////////////
// TASK VIEW

.sv-task-view {
  container-type: size;
  @include common.fullsize;
  display: flex;
  flex-direction: column;

  .sv-placeholder {
    margin: 12px;
    text-align: center;
  }

  .ff-list {
    box-sizing: border-box;
  }

  .sv-label {
    color: common.$color-text-dark;
    margin: 8px 0 4px 0;
  }

  .sv-label-right {
    text-align: end;
    color: common.$color-text-dark;
    margin: 4px 0;
  }

  .sv-image {
    margin: 4px 0;

    img {
      width: 100%;
      height: auto;
    }
  }
}

.sv-task-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 3px;
  flex-basis: 50%;
}

.sv-task-item-full {
  flex-basis: 100%;
}

.sv-task-option-base-align {
  color: #a0a0a0;
  align-self: flex-end;
}

.sv-item-border-l {
  border-left: solid;
  border-left-width: 2px;
  border-left-color: #343434;
}

.sv-missing-translation {
  color: #cc3d3d;
}

////////////////////////////////////////////////////////////////////////////////
// TARGETS

.ff-list .sv-target-list-header {
  //background-color: $color-background-darker;
  font-weight: bold;
  pointer-events: none;
}

.ff-property-button.sv-property-button {
  align-items: center;
  padding: 0px;
  padding-left: 4px;
  padding-right: 4px;
  background-color: common.$color-background-light;
}

.sv-target-colorbox {
  float: right; 
  width: 1.2em; 
  height: 1.2em; 
}

////////////////////////////////////////////////////////////////////////////////
// PROPERTY VIEW

.sv-property-view {
  max-width: 100%;
  flex-grow: 1;
  display: flex;
  margin: 2px 0;
  max-height: 2em;

  * {
    box-sizing: content-box;
  }

  .sv-property-name {
    flex: 0 1 25%;
    padding-top: 4px;
    color: common.$color-text-dark;
  }

  .sv-property{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    .ff-label{
      padding: 0 2px;
      align-self: center;
      font-weight: normal;
    }

    .ff-button.ff-control{
      display: block;
      margin: 2px;
      padding: 0 5px;
      line-height: 1.35;
    }


    .sv-property-field {
      background-color: common.$color-background-darker;
      flex: 1 1 auto;
      min-width: auto;
      max-width: 20ch;
      line-height: 1.35;
      margin: 2px;
      padding: 2px;

      color: inherit;
      border: none;

      .ff-input{
        box-sizing: border-box;
        width: 100%;
        background: none;
      }
    }
  }


  .sv-property-group {
    /* for properties that are an array of values*/
    flex-grow: 1;
    max-width: 75%;
    display: flex;
    flex-wrap: wrap;
    .sv-property{
      justify-content: flex-end;
      margin-left: 4px;
      .sv-property-field{
        width: 6ch;
        flex-grow: 1;
      }
    }
  }

  &.sv-property-block, &.sv-property-block .sv-property {
    display: block;
    max-height: unset;
    padding-right: 6px;
    > textarea, > input{
      width: 100%;
      max-width: 100%;
    }
  }

  //Special styling for named properties
  &[data-path="Model.Position"],
  &[data-path="Model.Rotation"],
  &[data-path="Transform.Position"],
  &[data-path="Transform.Rotation"],
  &[data-path="Transform.Scale"]{
    [name="X"] .ff-label{
      color: #a63b4a;
    }
    [name="Y"] .ff-label{
      color: #6fa21c;
    }
    [name="Z"] .ff-label{
      color: #2f83e1;
    }
  }
}

@container (width < 350px){
  .sv-property-view .sv-property-group{
    flex-direction: column;
  }
}

////////////////////////////////////////////////////////////////////////////////
// STANDALONE UI

.sv-import-menu {
  width: 275px;
  height: 50%;
  font-size: 0.85em;

  .sv-import-error-msg {
    color: red;
  }

  .sv-notification {
    font-size: 0.85em;
    font-style: italic;
    color: explorer.$menu-color-text-dim;
  }

  .ff-label {
    font-weight: normal;
    padding: 0px;
  }
}


////////////////////////////////////////////////////////////////////////////////
// ARTICLE EDITOR

.sv-article-editor {
  @include common.fullsize;
  display: flex;
  flex-direction: column;

  .sv-container {
    overflow: hidden;
  }

  .sv-custom-buttons {
    float: left;
    padding-right: 1em;
    border-right: 1px solid common.$color-icon;

    .ff-button.ff-transparent {
      float: left;
      padding: 0 8px;
    }
  }

  .sv-overlay {
    @include common.fullsize;
    background-color: color.adjust(common.$color-background-dark, $alpha: -0.5);
    z-index: 0;
  }
}


////////////////////////////////////////////////////////////////////////////////
// MISC
.sv-drop-zone {
  border-style: dashed !important;
  border-width: 2px !important;
  border-color: blue !important;
  &.sv-property-view{
    margin: -2px !important;
  }
}