openmct/src/styles/_legacy.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2023, 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.
 *****************************************************************************/

@use 'sass:math';

/*********************************************************************** CLOCKS AND TIMERS */
.c-clock,
.c-timer {
  display: flex;
  align-items: center;
  font-size: 1.25em;
  overflow: hidden;

  > * {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .c-frame & {
    // When in a Display or Flexible Layout
    @include abs();
    padding: $interiorMargin;
  }
}

.c-clock {
  > * + * {
    margin-left: $interiorMargin;
  }

  &__timezone-selection .c-menu {
    // Menu for selecting timezones in properties dialog
    max-height: 200px;
  }
}

.c-timer {
  $ctrlW: 22px;

  &__controls {
    font-size: 1rem !important;
    margin-right: 0;
    min-width: 0;
    overflow: hidden;
    @include transition($prop: width, $dur: $transOutTime);
    width: 0;

    .c-icon-button:before {
      font-size: 1em;
    }
  }

  &__direction {
    font-size: 0.7em !important;
    margin-right: $interiorMargin;
  }

  &__ng-controller {
    font-size: 0;
    width: 0;
  }

  &:hover {
    .c-timer__controls {
      @include transition(
        $prop: width,
        $dur: $transOutTime
      ); // On purpose: want this to take a bit longer
      margin-right: $interiorMargin;
      width: $ctrlW * 2;
    }

    &.is-stopped .c-timer__controls {
      width: $ctrlW;
    }
  }

  &__direction,
  &__value {
    opacity: 0.5;
  }

  &.is-started {
    .c-timer {
      &__direction,
      &__value {
        opacity: 1;
      }
    }
  }
}

/*********************************************************************** SUMMARY WIDGETS */
/************************* WIDGET OBJECT */
@mixin cSummaryWidget() {
  box-shadow: $shdwBtns;
  border-radius: $basicCr;
  border-style: solid;
  border-width: 1px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &[href] {
    cursor: pointer;
  }

  &__icon {
    // Hide the icon holder element. Selector below shows this once 'icon-*' is added.
    display: none;
    font-size: 0.9em;
  }

  &__label {
    @include ellipsize();
  }

  [class*='icon-'] {
    // When 'icon-*' is added, show this element and add margin
    display: block;
    margin-right: $interiorMarginSm;
  }
}

.c-summary-widget,
.c-sw {
  @include cSummaryWidget();
  padding: $interiorMarginLg $interiorMarginLg * 2;

  &--thumb {
    max-width: 30%;
    padding: $interiorMarginSm $interiorMargin;
  }
}

.widget-edit-holder {
  // Hide edit area when in browse mode
  display: none;
}

.widget-rule-header {
  display: flex;
  align-items: center;

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

[class*='action-buttons-wrapper'] {
  white-space: nowrap;
  line-height: $btnStdH;
}

.widget-rules-wrapper,
.widget-rule-content,
.w-widget-test-data-content {
  min-height: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.widget-rules-wrapper {
  flex: 1 1 auto !important;
}

.widget-rule-content.expanded {
  overflow: visible !important;
  min-height: 50px;
  height: auto;
  margin-top: $interiorMargin;
  opacity: 1;
  pointer-events: inherit;
}

.w-widget-test-data-content {
  .l-enable {
    padding: $interiorMargin 0;
  }

  .w-widget-test-data-items {
    max-height: 20vh;
    overflow-y: scroll !important;
    padding-right: $interiorMargin;
  }
}

.l-widget-thumb-wrapper,
.l-compact-form label {
  $ruleLabelW: 40%;
  $ruleLabelMaxW: 150px;
  display: flex;
  max-width: $ruleLabelMaxW;
  width: $ruleLabelW;
}

.js-summary-widget__message {
  display: none;
}

/**************\ EDITING A WIDGET */
.w-summary-widget {
  // Classes for editor layout while editing a widget
  // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
  // being edited.
  @include abs();
  display: flex;
  flex-direction: column;

  > .l-summary-widget {
    // Main view of the summary widget
    // Give some airspace and center the widget in the area
    margin: 30px auto;
  }

  .widget-edit-holder {
    display: flex; // Overrides `display: none` during Browse mode
    flex: 1 1 auto;
    overflow: hidden;

    .flex-accordion-holder {
      // Needed because otherwise accordion elements "creep" when contents expand and contract
      display: block !important;
    }
    &.expanded-widget-test-data {
      .w-widget-test-data-content {
        min-height: 50px;
        height: auto;
        opacity: 1;
        pointer-events: inherit;
      }
      &:not(.expanded-widget-rules) {
        // Test data is expanded and rules are collapsed
        // Make text data take up all the vertical space
        .flex-accordion-holder {
          display: flex;
        }
      }
    }
    &.expanded-widget-rules {
      .widget-rules-wrapper {
        min-height: 50px;
        height: 100%; // Fix for Chrome 73 scrolling bug
        opacity: 1;
        pointer-events: inherit;
      }
    }
  }

  &.s-status-no-data {
    .widget-edit-holder {
      opacity: 0.3;
      pointer-events: none;
    }
    .js-summary-widget__message {
      display: flex;
    }
  }

  .l-compact-form {
    // Overrides on .l-compact-form
    ul {
      &:last-child {
        margin: 0;
      }

      li {
        &:not(.widget-rule-header) {
          &:not(.connects-to-previous) {
            border-top: 1px solid $colorFormLines;
          }
        }
        &.connects-to-previous {
          padding: $interiorMargin 0;
        }

        > label {
          display: block; // Needed to align text to right
          text-align: right;
          width: 90px;
          flex: 0 0 auto;
        }

        .controls {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: stretch;
          > * + * {
            margin-left: $interiorMarginSm;
          }
        }
      }
    }

    &.s-widget-test-data-item {
      // Single line of ul li label span, etc.
      ul {
        li {
          border: none !important;
          > label {
            display: inline-block;
            width: auto;
            text-align: left;
          }
        }
      }
    }
  }

  .t-condition .controls {
    > * {
      margin-bottom: $interiorMargin;
    }
  }
}

.widget-edit-holder {
  font-size: 0.8rem;
}

.widget-rules-wrapper {
  // Wrapper area that holds n rules
  box-sizing: border-box;
  overflow-y: scroll;
  padding-right: $interiorMargin;
}

.l-widget-rule,
.l-widget-test-data-item {
  box-sizing: border-box;
  margin-bottom: $interiorMarginSm;
  padding: $interiorMargin $interiorMarginLg;
}

.rule-title {
  flex: 0 1 auto;
  color: pullForward($colorBodyFg, 50%);
}

.rule-description {
  flex: 1 1 auto;
  @include ellipsize();
  color: pushBack($colorBodyFg, 20%);
}

.s-widget-rule,
.s-widget-test-data-item {
  background-color: rgba($colorBodyFg, 0.1);
  border-radius: $basicCr;
}

.c-sw-edit {
  padding: $interiorMargin;

  &__ui {
    display: flex;
    flex-direction: column;

    &__header {
      border-top: 1px solid $colorInteriorBorder;
      display: flex;
      align-items: center;
      margin: $interiorMargin 0;
      padding: $interiorMargin 0;
      text-transform: uppercase;
      > * + * {
        margin-left: $interiorMarginSm;
      }
    }
  }
}

.c-sw-rule {
  &__grippy-wrapper {
    $d: 8px;
    flex: 0 0 auto;
    cursor: move;
    width: $d;
    height: $d;
    transform: translateY(-1px);
  }

  &__grippy {
    @include grippy($c: $colorItemTreeVC, $dir: 'y');
    @include abs();
  }
}

/******************************************************************* CHANNEL SELECTOR */
.channel-selector {
  .line {
    margin-bottom: $interiorMargin;
    min-height: $formInputH;
  }
  .treeview {
    $myBg: darken($colorBodyBg, 2%);
    @include reactive-input();
    min-height: 300px;
    max-height: 400px;
    overflow: auto;
    padding: $interiorMargin;
  }

  .btns-add-remove {
    margin-top: 150px;
    .s-button {
      display: block;
      margin-bottom: $interiorMargin;
      text-align: center;
    }
  }
}

/******************************************************************* AUTOFLOW TABULAR */
// NOT UNIT TESTED AS OF 3/12/19
.autoflow {
  $headerH: $formInputH;
  $colMargin: $interiorMargin;
  $colW: 225px;
  $valW: 70px;
  $valPad: 5px;
  $rowH: 15px;
  font-size: 0.75rem;

  &:hover {
    .l-autoflow-header .s-button.change-column-width {
      opacity: 1;
    }
  }

  .l-autoflow-header {
    bottom: auto;
    height: $headerH;
    line-height: $headerH;
    min-width: $colW;
    .t-last-update {
      overflow: hidden;
    }
    .s-button.change-column-width {
      @include transition($prop: opacity, $dur: $transOutTime);
      opacity: 0;
    }
    .l-filter {
      display: block;
      margin-right: $interiorMargin;
      input.t-filter-input {
        width: 150px;
      }
    }
  }

  .l-autoflow-items {
    overflow-x: scroll;
    overflow-y: hidden;
    top: $headerH + $interiorMargin * 2;
    white-space: nowrap;
    .l-autoflow-col {
      box-sizing: border-box;
      border-left: 1px solid $colorInteriorBorder;
      display: inline-block;
      padding-left: $colMargin;
      padding-right: $colMargin;
      vertical-align: top;
      width: $colW;
      .l-autoflow-row {
        box-sizing: border-box;
        border-bottom: 1px solid rgba(#fff, 0.05);
        display: block;
        height: $rowH;
        line-height: $rowH;
        margin-bottom: 1px;
        margin-top: 1px;
        position: relative;
        &:first-child {
          border-top: none;
        }
        &:hover {
          background: rgba(#fff, 0.1);
        }
        .l-autoflow-item.r {
          color: lighten($colorBodyFg, 10%);
        }
        &.first-in-group {
          border-top: 1px solid lighten($colorInteriorBorder, 20%);
        }
        .l-autoflow-item {
          display: block;
          &.l {
            float: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: auto;
          }
          &.r {
            border-radius: $smallCr;
            float: right;
            margin-left: $interiorMargin;
            padding-left: $valPad;
            padding-right: $valPad;
            text-align: right;
          }
        }
      }

      &:first-child {
        border-left: none;
        padding-left: 0;
      }
    }
  }
}

.frame {
  &.child-frame.panel {
    .autoflow .l-autoflow-header .l-filter {
      display: none;
    }
  }
}

/******************************************************************* INDICATORS */
/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */

.h-indicator,
mct-indicators mct-include {
  display: inline; // Fallback for display: contents
  display: contents;
}

/************************************************* DATETIME UI */
@mixin complexFieldHolder($myW) {
  width: $myW + $interiorMargin;
  input[type='text'] {
    width: $myW;
  }
}

.complex.datetime {
  span {
    display: inline-block;
    margin-right: $interiorMargin;
  }
  .fields {
    margin-top: $interiorMarginSm 0;
    padding: $interiorMarginSm 0;
  }

  .date {
    @include complexFieldHolder(80px);
  }

  .time.md {
    @include complexFieldHolder(60px);
  }

  .time.sm {
    @include complexFieldHolder(40px);
  }
}

/************************************************* INFO BUBBLES */
.l-infobubble-wrapper {
  $arwSize: 5px;
  box-shadow: rgba(black, 0.4) 0 1px 5px;
  position: relative;
  z-index: 50;
  .l-infobubble {
    display: inline-block;
    min-width: $bubbleMinW;
    max-width: $bubbleMaxW;
    padding: 5px 10px;
    &:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
    }
    table {
      width: 100%;
      tr {
        td {
          padding: 2px 0;
          vertical-align: top;
          &.label {
            padding-right: $interiorMargin * 2;
            white-space: nowrap;
          }
          &.value {
            //word-wrap: break-word; // Doesn't work in <td>?
            word-break: break-all;
          }
          &.align-wrap {
            white-space: normal;
          }
        }
      }
    }
    .title {
      @include ellipsize();
      margin-bottom: $interiorMargin;
    }
  }

  &.arw-down {
    margin-bottom: $arwSize * 2;
    .l-infobubble::before {
      left: 50%;
      top: 100%;
      margin-left: -1 * $arwSize;
      border-left: $arwSize solid transparent;
      border-right: $arwSize solid transparent;
      border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
    }
  }
  .arw {
    z-index: 2;
  }
  &.arw-up .arw.arw-down,
  &.arw-down .arw.arw-up {
    display: none;
  }
}

body.desktop {
  .l-infobubble {
    &.arw-left {
      margin-left: $bubbleArwSize * 2;
      &:before {
        @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
        right: 100%;
      }
    }

    &.arw-right {
      margin-right: $bubbleArwSize * 2;
      &:before {
        @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
        left: 100%;
      }
    }

    &.arw-top {
      &:before {
        top: $bubbleArwSize * 2;
      }
    }

    &.arw-btm {
      &:before {
        bottom: $bubbleArwSize * 2;
      }
    }
  }
}

.l-thumbsbubble-wrapper {
  .arw-up {
    @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
  }
  .arw-down {
    @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
  }
}

.s-infobubble {
  $emFg: darken($colorInfoBubbleFg, 20%);
  border-radius: $basicCr;
  box-shadow: rgba(black, 0.4) 0 1px 5px;
  background: $colorInfoBubbleBg;
  color: $colorInfoBubbleFg;
  font-size: 0.8rem;
  .title {
    color: $emFg;
    font-weight: bold;
  }
  table {
    tr {
      td {
        border: none;
        border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
        font-size: 0.9em;
      }

      &:first-child td {
        border-top: none !important;
      }
    }
  }
  &:first-child td {
    border-top: none;
  }

  .label {
    color: lighten($emFg, 30%);
  }

  .value {
    color: $emFg;
  }
}

.s-thumbsbubble {
  background: $colorThumbsBubbleBg;
  color: $colorThumbsBubbleFg;
}

/***************************************************************** SPLITTERS */
.splitter {
  display: block;
  position: absolute;
  z-index: 3;
  &:after {
    // The handle
    content: '';
    pointer-events: none;
    @include abs(0);
    background: $colorSplitterBg;
    display: block;
    z-index: 4;
  }
  &:active {
    &:after {
      background-color: $colorSplitterActive !important;
    }
  }

  @if $colorSplitterHover != 'none' {
    &:not(:active) {
      &:hover {
        &:after {
          background-color: $colorSplitterHover !important;
          @include transition($prop: background-color, $dur: 150ms);
        }
      }
    }
  }
}

.split-layout {
  $inset: $splitterHandleHitMargin;
  &.horizontal {
    // Slides vertically up and down, splitting the element horizontally
    overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
    .pane {
      left: 0;
      right: 0;
      &.top {
        bottom: auto;
      }
      &.bottom {
        top: auto;
      }
    }
    > .splitter {
      cursor: row-resize;
      left: 0;
      right: 0;
      height: $splitterHandleD;
      &:after {
        top: $inset;
        bottom: $inset;
      }
    }
  }

  &.vertical {
    // Slides horizontally left to right, splitting the element vertically
    .pane {
      top: 0;
      bottom: 0;
      &.left {
        right: auto;
      }
      &.right {
        left: auto;
      }
    }
    > .splitter {
      cursor: col-resize;
      top: 0;
      bottom: 0;
      width: $splitterHandleD;
      &:after {
        left: $inset;
        right: $inset;
        //width: $splitterHandleD;
      }
      &.flush-right {
        width: ceil(math.div($splitterHandleD, 2));
        &:after {
          width: $splitterHandleD;
          left: auto;
          right: 0;
        }
        &.edge-shdw {
          background-image: linear-gradient(
            90deg,
            rgba(black, 0) 40%,
            rgba(black, 0.05) 70%,
            rgba(black, 0.2) 100%
          );
        }
      }
    }
  }
}

/******************************************************************* FLEX STYLES */
.l-flex-row,
.l-flex-col {
  display: flex;
  flex-wrap: nowrap;
  .flex-elem {
    min-height: 0; // Needed to allow element to shrink within parent
    position: relative;
    &:not(.grows) {
      flex: 0 0 auto;
      &.flex-can-shrink {
        flex: 0 1 auto;
      }
    }
    &.grows {
      flex: 1 1 auto;
    }
    &.contents-align-right {
      text-align: right;
    }
  }
  .flex-container {
    // Apply to wrapping elements, mct-includes, etc.
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-height: 0;
  }
}

.l-flex-row {
  flex-direction: row;
  &.flex-elem {
    flex: 1 1 auto;
  }
  > .flex-elem {
    min-width: 0;
    &.holder:not(:last-child) {
      margin-right: $interiorMargin;
    }
  }
  .flex-container {
    flex-direction: row;
  }
}

.l-flex-col {
  flex-direction: column;
  > .flex-elem {
    min-height: 0;
    &.holder:not(:last-child) {
      margin-bottom: $interiorMarginLg;
    }
  }
  &.l-flex-accordion .flex-accordion-holder {
    display: flex;
    flex-direction: column;
  }
  .flex-container {
    flex-direction: column;
  }
}

.flex-fixed {
  flex: 0 0 auto;
}

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

/******************************************************************* GRID STYLES */
.grid-two-column,
.grid-properties {
  display: grid;
  grid-row-gap: 0;
  grid-template-columns: 1fr 2fr;
}

.grid-span-all,
.grid-two-column-span-cols {
  grid-column: 1 / 3;
}

.grid-elem {
  &:not(:first-child) {
    border-top: 1px solid $colorInteriorBorder;
  }
  &.label {
    background-color: rgba(0, 0, 128, 0.2);
  }
  &.value {
    background-color: rgba(0, 128, 0, 0.2);
  }
}

.grid-row {
  display: contents;
}

.grid-row {
  .grid-cell {
    padding: 3px $interiorMarginLg 3px 0;
    &[title]:not([title='']) {
      // When a cell has a title, assume it's helpful text
      cursor: help;
    }
  }
  &.force-border,
  &:not(:first-of-type) {
    // Row borders, effected via border-top on child elements of the row
    .grid-cell {
      border-top: 1px solid $colorInspectorSectionHeaderBg;
    }
  }
}

/******************************************************************* ABOUT SCREEN */
.l-about {
  &.abs {
    overflow: auto;
  }
  $contentH: 200px;
  .l-splash {
    position: relative;
    height: 45%;
  }
  .l-content {
    position: relative;
    margin-top: $interiorMarginLg;
  }
}

.s-about {
  line-height: 120%;

  a {
    color: $colorAboutLink;
  }

  h1,
  h2,
  h3 {
    color: pullForward($colorBodyFg, 20%);
    margin-bottom: 1em;
  }

  h1 {
    font-size: 2.25em;
  }

  h2 {
    border-top: 1px solid $colorInteriorBorder;
    font-size: 1.5em;
    margin-top: 2em;
    padding-top: 1em;
  }

  h3 {
    margin-top: 2em;
  }

  .s-description,
  .s-button {
    line-height: 2em;
  }
  .l-licenses-software {
    .l-license-software {
      border-top: 1px solid $colorInteriorBorder;
      padding: 0.5em 0;
      &:first-child {
        border-top: none;
      }
      em {
        color: pushBack($colorBodyFg, 20%);
      }
      h3 {
        font-size: 1.25em;
      }
      .s-license-text {
        font-size: 0.9em;
      }
    }
  }
}

/******************************************************************* STARTUP / SPLASH SCREEN */
@mixin splashElem($m: 20%) {
  top: $m;
  right: $m * 1.25;
  bottom: $m;
  left: $m * 1.25;
}

.l-splash,
.l-splash:before,
.l-splash:after {
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
}

.l-splash {
  background-size: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  &:before,
  &:after {
    background-size: contain;
    content: '';
  }

  &:before {
    // NASA logo, dude
    $w: 5%;
    $m: 10px;
    background-image: url('../ui/layout/assets/images/logo-nasa.svg');
    top: $m;
    right: auto;
    bottom: auto;
    left: $m;
    height: auto;
    width: $w * 2;
    padding-bottom: $w;
    padding-top: $w;
  }

  &:after {
    // App logo
    top: 0;
    right: 15%;
    bottom: 0;
    left: 15%;
  }
}

.l-splash-holder {
  // Main outer holder for splash.
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  opacity: 1;
  .l-splash {
    // The splash element.
    @include splashElem();
  }
}

@media only screen and (max-device-width: 767px) {
  .l-splash-holder .l-splash {
    @include splashElem(0);
    border-radius: 0;
    box-shadow: none;
  }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
  .l-splash-holder .l-splash {
    &:before {
      // Make the NASA logo a bit bigger when we're in portrait mode.
      $w: 12%;
      width: $w * 2;
      padding-bottom: $w;
      padding-top: $w;
    }
  }
}

/******************************************************************* VARIOUS */
.c-overlay mct-include {
  display: inline; // Fallback for display: contents
  display: contents;
}

mct-container {
  display: block;
}

.overlay {
  .outer-holder {
    background: $colorMenuBg;
    color: $colorMenuFg !important;
  }
}

.t-popup {
  z-index: 75;
}

.form .form-row {
  .label {
    color: $colorMenuFg !important;
  }
  .selector-list {
    @include reactive-input();
    background: $colorInputBg !important;
    color: $colorInputFg !important;
  }
}

.ui-symbol.view-control {
  display: block;
  transform-origin: center center;

  &:before {
    content: $glyph-icon-arrow-right-equilateral;
  }

  &.expanded {
    transform: rotate(90deg);
  }
}

.t-frame-outer {
  min-width: 200px;
  min-height: 200px;
}

.l-iframe {
  iframe {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
  }
}

// Alert elements in views
.s-unsynced {
  @include sUnsynced();
}

.s-status-timeconductor-unsynced {
  // Plot areas
  .gl-plot .gl-plot-display-area {
    @include sUnsynced();
  }

  // Object headers
  .object-header {
    .t-object-alert {
      display: inline;
    }
  }
}

.abs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  width: auto;
}

.code {
  font-family: 'Lucida Console', monospace;
  font-size: 0.7em;
  line-height: 150%;
  white-space: pre;
}

.codehilite {
  @extend .code;
  background-color: rgba($colorBodyFg, 0.1);
  padding: 1em;
}

.s-status-missing {
  // Labels. Expects .s-status-missing to be applied to mct-representation that contains
  .t-object-label .t-item-icon:before {
    content: $glyph-icon-object-unknown;
  }

  // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
  .item .t-item-icon-glyph:before {
    content: $glyph-icon-object-unknown;
  }

  // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
  &.object-header {
    .type-icon:before {
      content: $glyph-icon-object-unknown;
    }
  }

  // Tree item. Expects .s-status-missing to be applied to .tree-item,
  // and mct-representation.search-item
  &.tree-item,
  &.search-item {
    > .rep-object-label .t-item-icon:before {
      content: $glyph-icon-object-unknown;
    }
  }
}

.align-right {
  text-align: right;
}

.centered {
  text-align: center;
}

.no-selection {
  // aka selection = "None". Used in palettes and their menu buttons.
  $c: red;
  $s: 48%;
  $e: 52%;
  background-image: linear-gradient(-45deg, transparent $s - 5%, $c $s, $c $e, transparent $e + 5%);
  box-shadow: inset rgba(black, 0.3) 0 0 0 1px;
  background-repeat: no-repeat;
  background-size: contain;
}

.scrolling,
.scroll {
  overflow: auto;
}

.vscroll {
  overflow-x: hidden;
  overflow-y: auto;
  &.scroll-pad {
    padding-right: $interiorMargin;
  }
}

.vscroll--persist {
  overflow-x: hidden;
  overflow-y: scroll;
}

.slidable {
  cursor: move; // Fallback
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  &.horz {
    cursor: col-resize;
  }
  &.vert {
    cursor: row-resize;
  }
}

.no-margin {
  margin: 0;
}

.ds {
  box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
}

.capitalize {
  text-transform: capitalize;
}

.hide,
.hidden,
.t-main-view .hide-in-t-main-view {
  display: none !important;
}

.hide-nice {
  opacity: 0;
  pointer-events: none;
}

.invisible {
  display: block;
  visibility: hidden;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0 !important;
  transform: scale(0);
  pointer-events: none;
  position: absolute;
}

.sep {
  color: rgba(#fff, 0.2);
}

.comma-list span {
  &:not(:first-child) {
    &:before {
      content: ', ';
    }
  }
}