/*
 * © 2024 AxonOps Limited. All rights reserved.
 *
 * 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.
 */
// Mixin to change the scrollbar's appearence
@mixin scrollbar($thumbColor, $trackColor) {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    margin-left: -5px;
  }

  &::-webkit-scrollbar-button {
    width: 0;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumbColor;
    border: 0 none #ffffff;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-track {
    background: $trackColor;
    border: 0 none #ffffff;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-track:hover {
    background: $trackColor;
  }

  &::-webkit-scrollbar-track:active {
    background: darken($trackColor, 1);
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}
// Mixin for a faster font defining
@mixin fontface($name, $folder, $fontname, $format, $style, $weight) {
  font-family: '#{$name}';

  @if $folder != 'none' {
    src: url("../assets/fonts/#{$folder}/#{$fontname}.#{$format}");
  } @else {
    src: url("../assets/fonts/#{$fontname}.#{$format}");
  }
  font: {
    style: $style;
    weight: $weight;
    display: auto;
  }
}
// Mixin to add either absolute or fixed position
@mixin position($pos: absolute, $top: 0, $bottom: 0, $right: 0, $left: 0) {
  position: $pos;
  top: $top;
  bottom: $bottom;
  right: $right;
  left: $left;
  margin: auto;
}
// Prevent selection

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
// Reverse selection prevention

.no-select-reverse {
  -webkit-touch-callout: all;
  -webkit-user-select: all;
  user-select: all;
}
/**
* Styling applied on a wide range of elements
* Localization sub-processes for elements - capitalize and uppercase characters -
*/
[mulang] {
  &[capitalize] {
    text-transform: capitalize;
  }

  &[uppercase] {
    text-transform: uppercase;
  }
}
/**
* For all elements in the UI
*/
* {
  @include scrollbar(#515151, #201f23);
  /**
  * For all columns inside a `table` element
  */
  &[class^='col-'] {
    position: relative;
    padding: 0;

    &.center {
      display: flex;
      flex: {
        direction: column;
        wrap: nowrap;
      }
      justify-content: center;
      align-items: flex-end;

      div.box-row {
        margin-bottom: 10px;
      }
    }
  }
}
/**
* For JSTree JQuery plugin
*/
.jstree-node,
li.jstree-node {
  font: {
    family: 'Main', sans-serif;
    size: 14px;
  }
}

.jstree-anchor {
  span {
    font-weight: 500;

    &.type-value {
      max-width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

a.jstree-anchor {
  color: #e3e3e3 !important;
  font-size: 100%;
  line-height: 24px !important;
  opacity: 0.85;
  text-shadow: 0 0;

  &.jstree-clicked,
  &.jstree-hovered {
    background: #2c2c2c;
    border-radius: 4px;
    box-shadow: inset 0 0 0;

    &.jstree-clicked {
      background: #3e3e3e;
    }
  }
}

.jstree-icon.jstree-themeicon {
  background-size: 50% !important;
  opacity: 0.8;
}

.material-icons.for-treeview {
  position: relative;
  left: -5px;
  vertical-align: middle;
  transform: scale(0.7);
}

.jstree-default-dark a {
  color: #dfdfdf !important;
}

.jstree-icon.jstree-themeicon[style*="theme/extra"] {
  position: relative;
  left: -1px;
  background-size: 100% !important;
  opacity: 0.7;
}
/**
* For different elements in the UI
*/
span.reveal-password {
  position: relative;
  bottom: 4px;

  button {
    transform: scale(0.8);
    height: 64px;
    border-radius: 50%;
    overflow: hidden;

    span.mdc-button__label {
      transform: scale(1.2);
    }
  }
}

.box-row.max {
  width: 100%;
}

button:disabled {
  background-color: #9e9e9e !important;
  filter: grayscale(1) invert(1) !important;
  color: #292929 !important;
}

.force_width {
  width: 31.25px !important;
}

div.row {
  position: relative;
}

div.click {
  &[for-info-key],
  &[for-input] {
    @include position();
    cursor: pointer;
  }
}

a {
  user-select: none;
  -webkit-user-drag: none;
}

webview {
  @include position();
}

.ui-resizable-handle {
  z-index: 0 !important;
  transition: background 0.2s ease-out;
}

div.row {
  width: 100%;
}

.line-forbidden {
  background: rgba(167,35,35,.1);
}

.forbidden {
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.6);
  transform: scale(0.55);
  margin-left: 20px;
}

.diff {
  background: rgba(255,255,255,.15);
}

div.query-tracing div.mdc-data-table {
  margin-bottom: 30px;

  div.mdc-data-table__table-container {
    table {
      width: 100%;

      tbody tr {
        td {
          span.color {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 3px;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

div.invalid-feedback,
div.valid-feedback {
  font-size: 80% !important;
}

div.modal-body {
  padding-top: 30px;
}

div.form-outline {
  div.clickable {
    @include position();
    cursor: pointer;
  }

  &.file {
    display: flex;
    flex: {
      direction: row;
      wrap: nowrap;
    }
    align: {
      items: center;
      content: center;
    }
    justify-content: flex-start;
  }
}

div.clr-picker {
  z-index: 10000;
}

.tooltip {
  font-family: 'Main', 'Minor', 'SimplifiedChinese', sans-serif;
}

div.toast-header button.navigation {
  position: relative;
  display: flex;
  width: 18px;
  height: 1em;
  flex: {
    direction: column;
    wrap: nowrap;
  }
  align-items: center;
  justify-content: center;
  margin-right: 3px;
  color: #000;
  filter: invert(1) grayscale(100%) brightness(200%);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  opacity: 0.5;
  box-sizing: content-box;
  padding: 0.25em;
  border: 0;
  background: transparent;

  ion-icon {
    @include position();
    transform: rotate(75deg);
    font-size: 130%;
    margin-top: 2px;
  }

  &:hover {
    opacity: 0.75;
  }

  &:active,
  &:focus {
    opacity: 1;
  }
}

input[type="number"] {
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

div.row {
  --mdb-gutter-x: 0;
}

div.small-hint {
  position: absolute;
  opacity: 0.7;
  font-size: 90%;
}

div.toast[toast-id] {
  div.toast-body {
    max-height: 200px;
    overflow: auto;

    code {
      color: inherit;
    }
  }
}

div.toast-body {
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 150px;
    font-size: 98% !important;
    display: inline-flex;
  }
}

div.terminate-process {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  left: 125px;
  top: 10px;
  z-index: 10;

  div.btn {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: #505050;
    transition: background 0.15s ease-in-out;
    margin-left: 3px;

    ion-icon {
      position: absolute;
      inset: 0;
      margin: auto;
      font-size: 175%;
      color: #e3e3e3;
    }

    &:hover {
      background: var(--workspace-background-color);

      ion-icon {
        color: #fff;
      }
    }
  }
}

.jstree-default-dark .jstree-search {
  font-style: normal !important;
  color: #dfdfdf !important;
  font-weight: 400 !important;
  text-shadow: 0 0 !important;
  border-radius: 5px;

  * {
    font-weight: 400 !important;
  }
}

div.search-in-metadata,
div.search-in-tree {
  background: #2c2c2c;
  border-radius: 8px;
  padding: 13px 6px 6px;
  height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 15px 0 #17181a;
  position: relative;
  z-index: 1;

  div.form-outline {
    opacity: 0;
    transition: all 0.1s ease-in-out;

    label.form-label {
      top: -4px;
    }

    input {
      font-size: 90% !important;
    }
  }

  &.show {
    height: 50px;
    padding: 13px 6px 6px;
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);

    div.form-outline {
      transition: all 0.35s ease-out;
      transition-delay: 0.2s;
      opacity: 1;
    }

    &.search-in-tree {
      margin: 30px 20px 20px;
    }
  }

  div.right-elements {
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-right: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;

    div.result-count {
      font-size: 70%;
      opacity: 0;
      transition: opacity 0.15s ease-in-out;
    }

    div.arrows {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 40px;
      margin-left: 10px;

      div.btn {
        color: inherit;
        font-size: 100%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.15s ease-in-out;

        ion-icon {
          position: absolute;
          inset: 0;
          margin: auto;
          top: 3px;
        }

        &:hover {
          opacity: 0.9;
        }
      }
    }

    &.show {
      opacity: 1;
      pointer-events: all;
      transition: opacity 0.15s ease-in-out;

      div.arrows {
        div.btn {
          opacity: 1;

          &.previous {
            transition-delay: 0.05s;
          }

          &.next {
            transition-delay: 0.1s;
          }
        }
      }

      div.result-count {
        opacity: 1;
        transition-delay: 0.15s;
      }
    }
  }

  &.search-in-tree {
    position: sticky;
    top: 10px;
    right: 0;
    left: 0;
    border-top-right-radius: 5px;
    margin: 0;
  }
}

a.jstree-anchor.animate-click {
  animation: {
    name: animate-click;
    duration: 0.45s;
    timing-function: ease-in-out;
    iteration-count: 1;
  }
}

div.form-outline.notch-no-radius {
  div.form-notch {
    div.form-notch-trailing {
      border-radius: 0 !important;
    }
  }
}

div.col-add-border {
  height: 44.61px;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(189, 189, 189, 0.30);
  border-left: 0;
  border-radius: 0 0.25rem 0.25rem 0;
}

a.jstree-anchor {
  position: relative !important;

  div.processing {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
    opacity: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px transparent solid;
    border-top: 2px #818181 solid;
    border-right: 2px #818181 solid;
    animation: rotate 0.7s linear infinite;
    transition: all 0.15s ease-in-out;
    opacity: 0;
  }

  i {
    transition: opacity 0.15s ease-in-out;
  }

  &.perform-process {
    i {
      opacity: 0 !important;
      transition-delay: 0s;
    }

    div.processing {
      opacity: 1;
      transition-delay: 0.15s;
    }
  }
}

thead {
  tr {
    th {
      background: #2c2c2c;
    }
  }
}

.badge,
.form-check-label,
.form-label,
.modal-footer,
.modal-title,
div[data-tippy-root] {
  @extend .no-select;
}

div.hidden-area {
  .ui-resizable-handle:hover {
    background: rgba(58,112,201,.4);
  }
}

.no-transition {
  transition: none !important;
}

.message {
  @extend .no-select;
}

.tabulator-row .tabulator-cell {
  height: fit-content !important;
}

a:not(.sidenav-link):not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.carousel-control-prev):not(.carousel-control-next) {
  color: inherit !important;
}

a.json-placeholder {
  padding: 0 0.5em !important;
}

a.json-toggle:before {
  top: 1px;
}

div.switch-terminal {
  position: absolute;
  right: 0;
  margin: 14px;
  z-index: 3;
  opacity: 0.9;
  margin-right: 10px;
}

pre {
  font-size: inherit !important;
  margin: 0 !important;
}

.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
  background: #666666;
  opacity: 0.7;
}

.tabulator .tabulator-footer .tabulator-page:disabled {
  color: rgba(0, 0, 0, 0.7) !important;
  opacity: 0.4;
}

.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
  background: #202020;
  min-width: 25px;
  outline: none !important;
}

div.tabulator * {
  transition: all 0.2s ease-in-out;
}

span[no-connections-message] {
  b {
    color: white;
    font-weight: 500;
  }
}

div.form-outline.for-coloris {
  border: 1px solid rgb(78, 78, 78);
  border-radius: 7px;
  overflow: hidden;
  width: 140px;
}

div.form-outline.label-top {
  label {
    margin-left: 0;
    top: 1px;
  }
}

td.connections-table {
  background: #2b2b2b !important;

  div {
    td,
    th {
      background: #2b2b2b !important;
    }
  }
}

div.color-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #575757;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 3px;
}

button.connections-list {
  width: fit-content;
  height: 35px;
  color: inherit !important;
  position: relative;

  ion-icon {
    font-size: 150% !important;
    transform: rotate(180deg);
    transition: all 0.2s ease-in-out;
  }

  &.shown {
    ion-icon {
      transform: rotate(0deg);
    }
  }
}

td[data-id].checks {
  white-space: nowrap;

  span.badge:not(:first-of-type) {
    margin-left: 2px;
  }
}

div.section {
  div.btn[section*="phase"].disabled {
    opacity: 0.2 !important;
  }
}

div.resolve-variables {
  @include position(absolute, 0, 0, 6px, auto);
  display: flex;
  flex: {
    direction: column;
    wrap: nowrap;
  }
  align: {
    items: center;
    content: center;
  }
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;

  div.btn {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0.8;

    ion-icon {
      @include position();
      color: #e3e3e3;
      font-size: 150%;
    }
  }
}

.form-outline.form-white .form-control.disabled,
.form-outline.form-white .form-control:disabled {
  background-color: rgba(255, 255, 255, 0.15);
  opacity: 0.55;
  pointer-events: none;
}

.monaco-sash {
  z-index: 1 !important;
}

span.badge.badge-secondary.mandatory {
  float: right;
  height: 15px;
  position: relative;
  top: 7px;
  left: 0;
  opacity: 0.7;
}

ion-icon.axonops-status {
  margin-right: -3px;
  opacity: 0.85;

  &.false {
    font-size: 160%;
  }

  &.true {
    font-size: 125%;
    margin-left: 2px;
  }
}

ion-icon.management-tool {
  vertical-align: middle;
  margin-left: 5px;

  &[name="docker-plain"] {
    font-size: 230%;
    opacity: 0.7;
  }

  &[name="podman-plain"] {
    font-size: 190%;
  }

  &[name="unknown"] {
    font-size: 300%;
    transform: scale(0.55);
    margin-left: -2px;
    margin-right: -5px;
  }
}

.json-literal,
.json-string {
  color: #e3e3e3;
  font-weight: normal;
}

.hljs {
  color: #e3e3e3;
}

.form-outline.invalid-warning .form-control.is-invalid~.form-notch div {
  border-color: #dc904c;
}

.form-outline.invalid-warning .form-control.is-invalid~.form-label,
.form-outline.invalid-warning .invalid-feedback:not(.transparent-color),
.was-validated .form-outline.invalid-warning .form-control:invalid~.form-label {
  color: #dc904c !important;
}

div.invalid-feedback.transparent-color {
  color: transparent !important;
  pointer-events: none;
}

ul.dropdown-menu {
  li {
    span.group-text {
      font-size: 97%;
      padding: 0 10px;
      opacity: 0.6;
      @extend .no-select;
    }
  }

  &.multiple {
    a.dropdown-item {
      ion-icon {
        font-size: 100%;
        vertical-align: middle;
        position: relative;
        bottom: 2px;
        margin-right: 2px;

        &[name="circle-checked"] {
          display: none;
        }
      }

      &.selected {
        ion-icon {
          &[name="circle"] {
            display: none;
          }

          &[name="circle-checked"] {
            display: inline-block;
          }
        }
      }
    }
  }
}

.sub-output.error * {
  color: #f3546f !important;
}

span.badge.sub-badge {
  margin-left: 10px;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    left: -9px;
    top: -50%;
    margin: auto;
    width: 1px;
    height: 100%;
    background: rgb(235, 237, 239);
    background: linear-gradient(0deg, rgba(235, 237, 239, 1) 0%, rgba(38, 38, 38, 1) 100%);
    background-image: linear-gradient(to top, #ebedef, #ebedef, #ebedef, #ebedef, #ebedef, #d9dadc, #c7c8ca, #b5b6b8, #8e8f90, #69696a, #464647, #262626);
    opacity: 0.5;
  }

  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9px;
    margin: auto;
    height: 1px;
    width: 12px;
    background: #ebedef;
    opacity: 0.5;
  }
}

.ghost-field {
  opacity: 0.5;
}

div.btn.field-sort-type.badge {
  display: inline-block;
  height: inherit;
  line-height: 1;
  text: {
    transform: inherit;
    align: center;
  }
  padding: 0.35em 0.65em;
  font: {
    size: 0.75em;
    weight: 500;
  }
  color: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.27rem;
  overflow: hidden;
  box-shadow: 0 0;
  background: #1b1b1e;
  opacity: 0.9;
  transition: opacity 0.2s ease-in-out;
  margin: 0 1px;
  cursor: pointer;

  &:hover {
    opacity: 0.65;
  }
}

.invalid-text-container {
  color: #dc4c64;
  height: 0;
  transform: scaleY(0);

  .invalid-text {
    font-size: 80% !important;
    width: auto;
    margin-top: 3px;
    display: inline-block;
    transform-origin: top;
  }

  &.show {
    transition: transform 0.15s ease-in-out;
    height: auto;
    transform: scaleY(1);
  }
}

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

div.tippy-content.no-padding {
  padding: 0 !important;
  transition: none !important;
}

.badge-secondary {
  opacity: 0.95;
}

a.jstree-anchor {
  span.is-reversed-node,
  span.is-static-node,
  span.snippets-counter {
    background: #353535;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: fit-content;
    text-align: center;
    border-radius: 20px;
    transform: scale(0.75) translateY(-1px);
    padding-left: 9px;
    vertical-align: middle;
    margin-left: -6px;
    pointer-events: none;

    span.material-icons {
      bottom: 1px;
    }

    &.is-static-node {
      padding: 0 9px;
    }
  }

  span.snippets-counter {
    padding: 5px;
    vertical-align: middle;
    line-height: 0;
    display: none;

    &.show {
      display: inline-block;
    }

    ion-icon {
      vertical-align: middle;
      margin-right: 4px;
      transform: translateY(-1px);
      opacity: 0.8;
    }
  }
}

div.activities-table {
  width: 100%;
  min-height: 300px;
}

input {
  font-family: 'Main', 'Minor', 'SimplifiedChinese', sans-serif;
}

div.tooltip-info {
  cursor: help;
  background: rgba(123, 181, 255, 0.1);
  width: 25px;
  height: 25px;
  position: relative;
  border-radius: 50%;
  transition: background 0.2s ease-in-out;

  ion-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    font-size: 135%;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.9;
    transform: translateX(1px);
  }

  &:hover {
    background: rgba(123, 181, 255, 0.25);

    ion-icon {
      opacity: 1;
    }
  }

  &.absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: auto;
  }
}

.hidden {
  display: none !important;
}

img[src*=".gif"] {
  pointer-events: none !important;
}

img {
  user-select: none !important;
}

[data-tippy-root] {
  p {
    margin-bottom: 10px;
  }

  table {
    width: 100%;
  }

  ul {
    margin-bottom: auto;
  }
}

table._lwt_table {
  background: #212121;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;

  * {
    font-style: normal;
    font-weight: 400;
  }

  td,
  th {
    padding: 7px;
  }
}

.jstree-default-dark .jstree-search {
  background: rgba(36, 136, 224, 0.15) !important;
}
