/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2024, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is 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.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/******************************* SHELL */
.l-shell {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;


  &__drawer {
    background: $drawerBg;
    display: flex;
    flex-direction: column;
    height: 0;
    min-height: 0;
    max-height: 15%;
    overflow: hidden;
    @include transition(min-height);

    &.is-expanded {
      min-height: 100px;
    }
  }

  &__pane-tree {
    width: 40%;

    [class*='collapse-button'] {
      // For mobile, collapse button becomes menu icon
      body.mobile & {
        @include cClickIconButton();
        color: $colorKey !important;
        position: absolute;
        right: -18px;
        top: $interiorMarginSm;
        transform: translateX(100%);
        width: $mobileMenuIconD;
        z-index: 2;

        &:before {
          content: $glyph-icon-menu-hamburger;
        }
      }
    }
  }

  &__pane-tree,
  &__pane-inspector {
    .l-pane__contents {
      display: flex;
      flex-flow: column nowrap;
      overflow-x: hidden;
    }
  }

  &__pane-tree {
    .l-pane__contents {
      > * {
        flex: 0 0 auto;

        + * {
          margin-top: $interiorMargin;
        }
      }
    }
  }

  &__pane-main {
    .l-pane__header {
      display: none;
    }

    .l-pane__contents {
      .l-shell__main-.l-shell__main-view-browse-bar {
        position: relative;
      }

      // Using `position: absolute` due to flex having repaint issues with the Time Conductor, #5247
      .l-shell__time-conductor,
      .l-shell__main-container {
        position: absolute;
        left: 0;
        right: 0;
        height: auto;
        width: auto;
      }

      // Using `position: absolute` due to flex having repaint issues with the Time Conductor, #5247
      .l-shell__main-container {
        top: $shellMainBrowseBarH + $interiorMarginLg;
        bottom: $shellTimeConductorH + $interiorMargin;

        &.--has-toolbar {
          .is-editing & {
            top: $shellToolBarH + $shellMainBrowseBarH + $interiorMarginLg !important;
          }
        }

        > .c-object-view {
          border: 1px dashed transparent;
          .is-editing & {
            border-color: rgba($editUIAreaBaseColor, 0.6);
          }

          &[s-selected] {
            .is-editing & {
              border-color: $editUIAreaBaseColor
            }
          }
        }
      }

      @include phonePortrait() {
        .l-shell__main-container {
          bottom: $shellTimeConductorMobileH + $interiorMargin;
        }
      }

      .l-shell__time-conductor {
        bottom: 0;
      }
    }
  }

  body.mobile & {
    &__pane-main,
    &__pane-tree {
      padding: $interiorMarginLg;
    }

    &__pane-tree {
      background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));

      .l-pane__header {
        // Hide all buttons except the collapse button
        > :not(.l-pane__collapse-button) {
          display: none;
        }
      }

      [class*='expand-button'] {
        display: none;
      }

      &[class*='--collapsed'] {
        [class*='collapse-button'] {
          right: -8px;
        }
      }
    }
  }

  body.phone.portrait & {
    &__pane-tree {
      width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});

      + .l-pane {
        // Hide pane-main when this pane is expanded
        opacity: 0;
        pointer-events: none;
      }

      &[class*='--collapsed'] + .l-pane {
        // Show pane-main when tree is collapsed
        opacity: 1;
        pointer-events: inherit;
        transition: opacity 250ms ease 250ms;
      }
    }
  }

  //&__head,
  &__pane-inspector {
    body.mobile & {
      display: none;
    }
  }

  &__status {
    flex: 0 0 auto;
    display: flex;
  }

  /******************************* HEAD */
  &__main-view-browse-bar {
    flex: 0 0 auto;
    margin-bottom: $interiorMargin; // Needs some additional visual separation
  }

  &__head {
    body.mobile & {
      .c-create-button,
      .c-create-menu,
      .c-indicator,
      .c-icon-button {
        // Making status area visible, but hiding some widgets for mobile.
        display: none;
      }
    }
  }

  body.mobile & .l-shell__main-view-browse-bar {
    margin-left: $mobileMenuIconD; // Make room for the hamburger!
    .c-button[class*='__actions__edit'] {
      display: none; // Hide the main view edit button when in mobile context
    }
  }

  &__head {
    align-items: center;
    background: $colorHeadBg;
    display: grid;
    grid-template-columns: min-content 1fr 3fr repeat(4, min-content);
    grid-column-gap: $interiorMargin;
    padding: $interiorMargin $interiorMargin + 2;

    .l-shell__head__button {
      color: $colorBtnMajorBg;
      flex: 0 0 auto;
      font-size: 0.9em;
    }

    &-section {
      // Subdivides elements across the head
      display: flex;
    }

    &--expanded {
      .c-indicator__label {
        transition: none !important;
      }
    }
  }

  &__controls {
    $brdr: 1px solid $colorInteriorBorder;
    border-right: $brdr;
    border-left: $brdr;
    align-items: start;
    $p: $interiorMarginSm;
    padding-left: $p;
    padding-right: $p;
  }

  &__create-button,
  &__app-logo {
    flex: 0 0 auto;
  }

  &__create-button {
    body.mobile & {
      // Fixes weird gap in mobile status area
      margin-right: 0px;
    }
  }

  &__indicators {
    // Style as multiline by default
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    min-height: 25px;
    justify-content: flex-end;

    .l-shell__head--indicators-single-line & {
      flex-wrap: nowrap;
      justify-content: flex-start; // Overflow detection doesn't work with flex-end.
      overflow: hidden;

      > *:first-child {
        margin-left: auto; // Mimics justify-content: flex-end when in single line mode.
      }
    }
  }

  /******************************* MAIN AREA */
  &__main-container {
    // Wrapper for main views
    display: flex;
    flex-direction: column;
    flex: 1 1 auto !important;
    height: 100%; // Chrome 73 overflow bug fix
    overflow: auto;

    > * + * {
      margin-top: $interiorMargin;
    }

    > .c-object-view {
      flex: 1 1 auto;
      overflow: auto;
    }
  }

  &__tree {
    // Tree component within __pane-tree
    flex: 1 1 auto !important;
  }

  &__main {
    > .l-pane {
      padding: nth($shellPanePad, 1) 0;
    }
  }

  body.desktop & {
    &__main {
      // Top and bottom padding in container that holds tree, __pane-main and Inspector
      padding: nth($shellPanePad, 1) 0;
      min-height: 0;

      > .l-pane {
        padding-top: 0;
        padding-bottom: 0;
      }

      .l-pane__expand-button__label {
        // Add a plus icon before the label
        &:before {
          font-family: symbolsfont;
          content: $glyph-icon-plus;
          display: inline-block;
        }
      }
    }

    &__pane-tree,
    &__pane-inspector {
      max-width: 70%;
    }

    &__pane-tree {
      width: 300px;
      padding-left: nth($shellPanePad, 2);
    }

    &__pane-inspector {
      width: 200px;
      padding-right: nth($shellPanePad, 2);
    }
  }

  &__toolbar {
    // Toolbar in the main shell, used by Display Layouts
    $p: $interiorMargin;
    background: $editUIBaseColor;
    border-radius: $basicCr;
    height: $p + 24px; // Need to standardize the height
    justify-content: space-between;
    padding: $p;
    z-index: 2;
  }

  &__resizing {
    iframe {
      pointer-events: none;
    }
  }
}

.c-object-view {
  display: block;
  height: 100%;
  overflow: auto;

  &.is-stale {
    @include isStaleHolder();
  }
}

/************************** BROWSE BAR */
.l-browse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > * + * {
    margin-left: $interiorMarginSm;
  }

  &__start,
  &__end,
  &__actions {
    display: flex;
    align-items: center;
  }

  &__actions,
  &__end {
    .c-button {
      &[class*='icon-']:before {
        min-width: 1em;
        text-align: center;
      }
    }

    > * + * {
      margin-left: $interiorMarginSm;
    }
  }

  &__start {
    flex: 1 1 auto;
    min-width: 0; // Forces interior to compress when pushed on

    [class*='button'] {
      flex: 0 0 auto;
    }
  }

  &__end {
    flex: 0 0 auto;
  }

  &__nav-to-parent-button,
  &__disclosure-button {
    //flex: 0 0 auto;
  }

  &__nav-to-parent-button {
    // This is an icon-button
    margin-right: $interiorMargin;

    .is-editing & {
      display: none;
    }
  }

  &__object-name--w,
  &__object-name {
    flex: 0 1 auto;
  }

  .c-object-label__type-icon {
    opacity: $objectLabelTypeIconOpacity;
  }

  &__object-name--w {
    @include headerFont(1.5em);
    min-width: 0;

    .is-status__indicator {
      right: -5px !important;
      top: -4px !important;
    }
  }

  &__object-details {
    opacity: 0.5;
  }
}

/************************** DRAWER */
.c-drawer {
  /* Sliding overlay or push element to contain things
    * Designed for mobile and compact desktop scenarios
    * Variations:
    * --overlays: position absolute, overlays neighboring elements
    * --push: position relative, pushs/collapses neighboring elements
    * --align-left, align-top: opens from left or top respectively
    * &.is-expanded: applied when expanded.
     */

  $transProps: width, min-width, height, min-height;

  min-height: 0;
  min-width: 0;
  overflow: hidden;

  &:not(.is-expanded) {
    // When collapsed, hide internal elements
    > * {
      display: none;
    }
  }

  &.c-drawer--align-left {
    @include transition($prop: $transProps, $dur: $transOutTime);
    height: 100%;
  }

  &.c-drawer--align-top {
    @include transition($prop: $transProps, $dur: $transOutTime);
  }

  &.c-drawer--overlays {
    position: absolute;
    z-index: 3;

    &.is-expanded {
      // Height and width must be set per usage
      &.c-drawer--align-left {
        box-shadow: rgba(black, 0.7) 3px 0 20px;
      }

      &.c-drawer--align-top {
        box-shadow: rgba(black, 0.7) 0 3px 20px;
      }
    }
  }

  &.c-drawer--push {
    position: relative;

    &.is-expanded {
      // Height and width must be set per usage
      &.c-drawer--align-left {
        box-shadow: rgba(black, 0.2) 3px 0 20px;
        margin-right: $interiorMarginLg;
      }

      &.c-drawer--align-top {
        box-shadow: rgba(black, 0.2) 0 3px 20px;
        margin-bottom: $interiorMarginLg; // Not sure this is desired here
      }
    }
  }
}