_elements.scss

@use "config" as *;
@use "mixins" as *;
@use "sass:math";
@use "@material/snackbar" as snackbar;
@use "@material/button" as button;
@use "@material/menu-surface" as menu-surface;

.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;
}
.empty-space {
  display: block;
  width: 48px;
}

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

//
// 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-headline-6 {
      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: $cool_gray_500;
  margin-bottom: 4px;
}

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

// Link
a {
  color: $primary;
}

.external-link-dark-bg {
  color: $white !important;
}

.external-link-light-bg {
  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-content,

.menu-action,

.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);
}

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

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

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

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

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

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

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

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

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

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

  &.active {
    color: $green;
  }

  &.warning {
    color: $yellow_500;
  }
}

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

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

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

//
// resource

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

  &.video,
  &.audio,
  &.archive,
  &.text,
  &.document {
    height: auto;

    &.pdf {
      height: 70vh;
    }
  }

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

  .toolbar {
    color: $primary_50;
    background-color: $dark;
    height: 64px;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 4px 4px 0px #888888;
  }

  .action,
  .navigation {
    .mat-mdc-button:disabled,
    .mat-mdc-icon-button:disabled {
      color: grey;
    }
  }

  .action {
    z-index: 1;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    color: $primary_50;
    height: 40px;
    padding: 8px 0;
    align-items: center;
    a {
      color: $primary_50 !important;
    }

    &.overlay {
      background: $dark;
    }

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

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

      &.top {
        top: 0;
      }

      &.bottom {
        background-color: inherit;
        bottom: 0;
      }
    }
  }

  .representation-error {
    .action a {
      color: $red !important;
    }
  }

  // .pdfViewer {
  //   margin-bottom: 64px;
  // }
}

// file representation menu styling
.representation-menu {
  --mat-menu-item-label-text-color: $white;
  &.mdc-menu-surface {
    @include menu-surface.fill-color($dark);
    @include menu-surface.ink-color($white);
  }
}

.no-results {
  margin: 64px;
  min-width: 400px;
  max-width: calc(70vw - 128px);
  line-height: 1.5;
}

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

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

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

.mat-mdc-list.without-padding {
  .mat-mdc-list-item {
    padding: 0 !important;
  }
}

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

//
// 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: $primary_100;

      .hidden {
        display: block;
      }
    }

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

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

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

      h5.mat-subtitle-1,
      p.mat-subtitle-2 {
        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;

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

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

// progress indicator icon on next and submit buttons
.progress-button-content {
  display: flex;
  align-items: center;
}

.next-progress,
.submit-progress {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

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

//
// progress-indicator without default color

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

// progress-indicator inside drag & drop container
.dd-container {
  .app-progress-indicator.default {
    margin: 16px auto !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: $yellow_100;
  }

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

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

.mat-mdc-snack-bar-container {

  &.success {
    @include snackbar.fill-color(rgba($primary, 0.9));
    @include snackbar.label-ink-color($primary_contrast);

    .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){
      @include button.ink-color($primary_contrast);
    }
  }

  &.failed, &.error {
    @include snackbar.fill-color(rgba($red, 0.9));
    @include snackbar.label-ink-color($red_contrast);

    .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){
      @include button.ink-color($red_contrast);
    }
  }

  &.note {
    @include snackbar.fill-color(rgba($yellow, 0.9));
    @include snackbar.label-ink-color($yellow_contrast);

    .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){
      @include button.ink-color($yellow_contrast);
    }
  }
}

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

//
// mat tab

.mat-mdc-tab-header {
  background: $white;
  position: sticky !important;
  z-index: 1;
}

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

.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-mdc-dialog-container {
    overflow-y: auto;

    .dialog-content {
      padding: 24px;
    }
  }
}

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

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

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

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

      &:disabled {
        color: $cold_grey_400;
      }

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

      .mat-icon {
        margin-right: 0px;
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }

      .mat-mdc-button-touch-target {
        height: 0px !important;
        width: 0px !important;
      }
    }

    button.info {
      cursor: inherit;
    }

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


  }
}

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

//
// tooltip configuration

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

.wide-tooltip {
  max-width: unset !important;
}

.annotation-tooltip {
  p {
    white-space: normal;
    text-overflow: ellipsis;
  }
}

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

//
// 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-mdc-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-mdc-menu-panel {
    margin-top: 8px;
    min-height: 48px !important;
  }
}