/**
 * Copyright 2020 Google LLC
 *
 * 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.
 */

@import '../common/color';
@import '../common/utils';
@import '../App/variables';
@import '../Firestore/variables';

.Firestore {
  display: flex;
  flex-direction: column;
  position: relative;

  // Each panel is individually scrollable within the panel, so we want to avoid
  // making the whole page scrollable by making stuff fit into viewport height.
  height: $app-remaining-viewport-height-for-content;
  // But keep a min-height to keep it usable (at the cost of page scrolling).
  min-height: $firestore-card-min-height;
}

.Firestore-sub-tabs {
  margin-bottom: $firestore-sub-tabs-margin-bottom;
  // Shadow border at bottom
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) inset;

  .mdc-tab {
    width: fit-content;
    height: $firestore-sub-tabs-height;
    &:not(:first-of-type) {
      margin-left: 24px;
    }
  }
}

.Firestore-actions {
  position: absolute;
  right: 0px;
  top: $firestore-sub-tabs-margin-bottom;

  button {
    width: fit-content;
    margin: 6px 0;
  }
}

.Firestore-panels-wrapper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.Firestore-panels {
  display: flex;
  flex-direction: row !important;
  min-width: 0;
  flex: 1 1 auto; // grow panels to bottom of card
  overflow: hidden;
}

// TODO: Remove this wrapper and merge everything in document into a big list.
.Firestore-Document-Fields {
  @include scrollable;
  display: flex;
  flex-direction: column;
  flex: 2;
  min-width: 0;

  .Firestore-InlineEditor-relative-anchor {
    .Firestore-InlineEditor {
      // Default to the size of the panel + 8px overhang on each side
      min-width: calc(100% + 16px);
    }
  }

  .Firestore-Document-Warning {
    align-items: center;
    align-self: center;
    display: flex;
    flex: 1;
    max-width: 256px;
    text-align: center;
  }
}

.Firestore-Document-List,
.Firestore-Field-List {
  @include scrollable;
  flex: 1;
  min-width: 0;
}

/** Only show at most 3 panels (Documents/Collections) */
.Firestore-panels {
  .Firestore-Document,
  .Firestore-Collection {
    display: none;
    flex-direction: column;
    min-width: 0;

    /* Show a border _between_ rendered panels */
    + .Firestore-Document,
    + .Firestore-Collection {
      border-left: 1px solid $COLOR_DIVIDER;

      &:nth-last-child(3) {
        border-left: none;
      }
    }

    &:nth-last-child(-n + 3) {
      display: flex;
      flex: 1;
    }

    &:nth-last-child(1) {
      flex: 2;
    }
  }

  .Firestore-List-Item {
    padding-left: 42px; // align with action button labels
    font-family: 'Roboto Mono', monospace;
  }

  .mdc-list--dense {
    padding: 0;
  }

  .List-Actions {
    padding: 0;

    .list-button {
      @include ellipsis;
      border-radius: 0;
      width: 100%;
      justify-content: flex-start;

      .mdc-button__ripple {
        border-radius: 0;
      }
    }
  }
}

.Firestore--dialog-body {
  .Callout {
    margin-bottom: 16px;
  }
}
