_elements.scss

//
// flex layout helper
@use "sass:math";

.fill-remaining-space {
  /* This fills the remaining space, by using flexbox.
     Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}
.space-reducer {
  max-height: 14px;
}

// --------------------------------------

//
// images, logos, avatars
.avatar-image {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin-right: 12px;

  &.square {
    border-radius: 6px;
  }
}

// --------------------------------------

//
// toolbar for content title, subtitle etc.
.app-toolbar {
  background: whitesmoke;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  //  margin: 48px 0 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;

  &.transparent {
    background: none;
  }

  .app-toolbar-row {
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;

    .mat-title {
      word-wrap: normal;
      white-space: normal;
    }
  }

  .app-toolbar-action.button {
    margin: 0 0 16px;
    min-width: 40px;

    &.left {
      margin-right: 16px;
    }

    &.right {
      margin-left: 16px;
    }
  }
}

.subtitle {
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 4px;
}

// --------------------------------------

//
// Link
a {
  color: $primary;
}

.external-link {
  color: $primary_400 !important;
}

a,
.link,
.external-link {
  cursor: pointer;
  text-decoration: none;
}

// --------------------------------------

//
// logo, action button
.logo,
.action {
  .main-toolbar-button {
    height: $header-height;
    border-radius: 0;
  }

  // override dsp-ui search panel style
  .app-search-panel .mobile-only .app-fulltext-search-button {
    height: $header-height;
    border-radius: 0;
    margin-top: 4px;
  }
  .app-fulltext-search-mobile-panel .app-fulltext-search-button {
    height: auto !important;
    border-radius: $border-radius !important;
    margin-top: 0 !important;
  }
}

// --------------------------------------

//
// margin element
.more-space-top {
  margin-top: 32px !important;
}
.more-space-bottom {
  margin-bottom: 24px !important;

  &.table {
    margin-bottom: 32px !important;
  }
}

// --------------------------------------

//
// menu
.menu-header,
.menu-content,
.menu-footer {
  width: 192px;
}

.menu-action,
.menu-title {
  width: 100%;
}

.menu-header {
  background-color: $primary;
  color: white;
  border-bottom: 1px solid rgba($primary, 0.1);
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  display: inline-block;
  height: 48px;

  &.active {
    background-color: $primary;
  }

  &.inactive {
    background-color: $warn;
  }

  .menu-title {
    text-align: center;
  }
}

.menu-content {
  .mat-grid-tile button {
    border-radius: $border-radius;
    font-size: 11px;
    height: 84px;
    padding: 6px;
    width: 84px;

    .mat-icon {
      font-size: 36px;
      height: 36px;
      width: 36px;
    }
  }
}

.border-top {
  border-top: 1px solid rgba($primary, 0.1);
}

.border-bottom {
  border-bottom: 1px solid rgba($primary, 0.1);
}

.menu-footer {
  .menu-action.logout {
    background: #ebebeb;
    height: 48px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    &:hover {
      background: $warn;
    }
  }
}

.mat-menu-content {
  padding: 0 !important;

  .menu-action {
    .mat-button-wrapper {
      line-height: unset !important;
    }
  }
}

// --------------------------------------

//
// card
.mat-card {
  .mat-card-title,
  .mat-card-subtitle {
    display: flex;
  }

  &.no-shadow {
    box-shadow: none !important;
  }

  .mat-card-actions {
    text-align: right;
  }
}

// --------------------------------------

//
// status badge
.badge {
  padding: 4px 6px;
  font-weight: bolder;
  border-radius: 4px;

  &.status {
    color: white;
    background: $warn;

    &.active {
      background: $active;
    }
  }
}

// status class alone is only for colorized text
.status.text-only {
  color: $warn;

  &.active {
    color: $active;
  }

  &.warning {
    color: $accent_400;
  }
}

// --------------------------------------

//
// danger zone
.app-danger-zone {
  border: 1px solid $warn;
  border-radius: $border-radius;
}

// --------------------------------------

//
// resource

.dsp-representation {
  width: 100%;
  height: 70vh;
  max-height: 800px;
  display: block;
  position: relative;
  padding: 0;

  &.audio {
    height: auto;
  }
  .caption {
    padding: 10px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
  }

  .action {
    z-index: 1;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    // background: rgba(200, 200, 200, 0.3);
    color: $primary_50;

    a {
      color: $primary_50 !important;
    }

    &.overlay {
      background: rgba(0, 0, 0, 0.48);
    }

    &.vertical {
      width: $panel-height;
      height: auto;
      right: 0;
      flex-direction: column;
    }

    &.horizontal {
      height: $panel-height;
      width: 100%;
      left: 0;
      flex-direction: row;

      &.top {
        top: 0;
      }

      &.bottom {
        bottom: 0;
      }
    }
  }

  // first navigation implementation
  // on the left resp. on the right hand side of osd viewer
  .navigation {
    position: absolute;
    z-index: 1;
    color: $primary_50;

    &.vertical {
      height: calc(100% - #{$panel-height});
      width: $panel-height;
      top: $panel-height;
      &.previous {
        left: 0;
      }

      &.next {
        right: 0;
      }
      .mat-button.full-size {
        height: 100% !important;
        width: $panel-height !important;

        padding: 0 !important;
        min-width: $panel-height !important;
      }
    }

    &.horizontal {
      width: 100%;
      height: $panel-height;
      background: $primary_900;
      position: inherit;

      &.bottom {
        position: absolute;
        bottom: 0;

        .compound-nav {
          bottom: 4px;
          position: relative;
        }
      }
    }
  }

  .pdfViewer {
    margin-top: $panel-height;
  }
}

.no-results {
  margin: 64px auto;
  width: 400px;
}

// --------------------------------------

//
// list
.simple-list {
  padding: 16px;

  .mat-list-item {
    .list-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      padding: 4px;
      position: absolute;
      left: 0;
    }

    .mat-list-text {
      position: relative;
      left: 48px;
    }
  }
}

// --------------------------------------

//
// table
.table {
  border-collapse: collapse;
  width: 100%;
  // max-width: calc(1000px - 2 * 48px);

  &.deactivated,
  &.deactivated .mat-icon {
    color: rgba(0, 0, 0, 0.38);

    .avatar-image {
      opacity: 0.3;
    }

    &:hover {
      color: rgba(0, 0, 0, 0.62);
    }
  }

  tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    height: 88px;

    &.no-border {
      border-bottom: none;
    }

    .hidden {
      display: none;
    }

    //    &:not(:first-child):hover {
    &:hover {
      background-color: darken(#fff, 15%);

      .hidden {
        display: block;
      }
    }

    td,
    th {
      &:not(:first-child) {
        min-width: 96px;
      }

      &.table-action {
        button {
          float: right;
        }
      }

      padding: 6px 12px;
      text-align: left;

      h5.mat-subheading-2,
      p.mat-subheading-1 {
        margin: 0;
      }
    }
  }

  .avatar-cell {
    text-align: center;
    width: 48px;
  }
}

// --------------------------------------

// form
//
$form-width: 472px;
// golden cut (gc) calculation
$gc-large: decimal-floor(math.div($form-width, 1.618), 0) - 2;
$gc-small: $form-width - $gc-large - 4;

.form-content {
  margin: 24px auto;
  width: $form-width;

  .x-small-field,
  .small-field,
  .medium-field,
  .large-field {
    margin-bottom: 24px;
  }

  .x-small-field {
    width: calc(#{$gc-small} / 1.5);
  }

  .small-field {
    width: $gc-small;
  }

  .medium-field {
    width: $gc-large;
  }

  .large-field {
    min-width: $form-width;
  }

  &.small-form {
    width: $gc-large;

    .x-small-field,
    .small-field,
    .medium-field,
    .large-field {
      width: 100%;
      margin-bottom: 0;
    }
  }

  .input-icon {
    color: $black-60-opacity;
  }

  .form-panel {
    display: inline-flex;
    width: $form-width;

    &.form-action {
      display: flex;
    }
  }
}

.string-literal-error {
  font-size: 75%;
  color: $warn;
  top: -14px;
  position: relative;
  text-align: left;
  left: 64px;
  display: block;
}

// in case of an error:
.mat-form-field-invalid {
  .mat-form-field-label,
  .mat-hint {
    color: $warn;
  }
}

// progress indicator icon on submit button
.submit-progress {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px;
}

// --------------------------------------

//
// progress-indicator without default color

.app-progress-indicator {
  g {
    stroke: $primary_700 !important;
  }
}

// --------------------------------------

// tab bar in project, user route
.tab-bar {
  &.margin-from-top {
    margin-top: $tab-bar-margin;
  }

  .active-tab {
    opacity: 1;
  }

  .tab-icon {
    margin-right: 8px;
  }
}

// --------------------------------------

// notes and messages
.note {
  padding: 12px;

  &.developer {
    background-color: rgba(248, 166, 90, 0.5);
  }

  &.warning {
    background-color: rgba($accent_100, 0.5);
  }

  &.error {
    background-color: rgba($warn, 0.5);
  }

  &.success {
    background-color: rgba($active, 0.5);
  }
}

.mat-snack-bar-container {
  &.success {
    color: #000;
    background-color: rgba($active, 0.9);
  }
  &.failed {
    color: #fff;
    background-color: rgba($warn, 0.9);
  }
  &.note {
    color: #000;
    background-color: rgba($accent_100, 0.9);
  }
}

// --------------------------------------

//
// mat tab

.mat-tab-header {
  background: #fff;
  position: sticky !important;
  z-index: 1;
}

@media (max-width: 599px) {
  .mat-tab-header {
    top: 56px;
  }
}

.mat-tab-body-wrapper {
  z-index: 0;
}

.search-results-title {
  color: rgba(0, 0, 0, 1) !important;
}

.shorten-long-text {
  text-align: justify;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  max-height: 42px;
  text-overflow: ellipsis;
  display: block;
}
// --------------------------------------

//
// dialog box / material overlay

.cdk-overlay-pane {
  .mat-dialog-container {
    overflow-y: auto;
  }
}

// --------------------------------------

//
// action bubble
.action-bubble {
  position: absolute;
  right: 8px;
  top: -20px;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  padding: 0;
  background-color: #e4e4e4;
  z-index: 2;
  @include box-shadow();

  .button-container {
    button {
      // cursor: pointer;
      border: none;
      padding: 2px;
      outline: none;
      background-color: transparent;
      color: #000000;
      margin: 0;
      border-radius: 50%;
      transition: background-color ease-out 0.5s;
      min-width: inherit;
      line-height: normal;

      &:first-child,
      &:last-child {
        margin: 0 -1px;
      }

      .material-icons {
        font-size: 18px;
      }

      .mat-icon {
        padding: 2px;
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }
    }

    button.info {
      cursor: help;
    }

    button:hover {
      background-color: #c7c7c7;
    }
  }
}

// --------------------------------------

//
// tooltip configuration

.multi-line-tooltip {
  white-space: pre-line;
  line-height: 1.5;
  font-size: 11px;
}

// --------------------------------------

//
// nested mat-menu switch arrow to the left in case the menu position is on the right hand side
.switch-nested-menu {
  width: 180px;

  button[mat-menu-item] {
    padding-left: 32px;

    &.mat-menu-item-submenu-trigger {
      &::after {
        border-width: 5px 5px 5px 0;
        border-color: transparent currentColor transparent transparent;
        right: 0;
        left: 16px;
      }
    }
  }
}
.switch-nested-sub-menu {
  width: 180px;
  margin-left: -360px !important;
}
.switch-nested-sub-menu,
.default-nested-sub-menu {
  &.mat-menu-panel {
    margin-top: 8px;
    min-height: 48px !important;
  }
}

// --------------------------------------

//
// slider in compound object viewer
.navigation.horizontal {
  .mat-slider-track-background {
    background-color: $primary_200;
  }
  .mat-slider-thumb {
    background-color: $primary_400;
  }
}