@use '@angular/material' as mat;
@import "angular-notifier/styles.scss";
@import "angular-notifier/styles/themes/theme-material.scss";
@import "shared/ui-components/styles/notifications";
// @import "ngx-markdown-editor/assets/highlight.js/agate.min.css";
@import "shared/ui-components/styles/material-palette";
@import "assets/fonts/trains-icons.scss";
@import "layout/layout";

@include mat.core();

// The following mixins include base theme styles that are only needed once per application. These
// theme styles do not depend on the color, typography, or density settings in your theme. However,
// these styles may differ depending on the theme's design system. Currently all themes use the
// Material 2 design system, but in the future it may be possible to create theme based on other
// design systems, such as Material 3.
//
// Please note: you do not need to include the 'base' mixins, if you include the corresponding
// 'theme' mixin elsewhere in your Sass. The full 'theme' mixins already include the base styles.
//
// To learn more about "base" theme styles visit our theming guide:
// https://material.angular.io/guide/theming#theming-dimensions
//
// TODO(v17): Please move these @include statements to the preferred place in your Sass, and pass
// your theme to them. This will ensure the correct values for your app are included.
//@include mat.all-component-bases(/* TODO(v17): pass $your-theme here */);

$custom-typography: mat.define-typography-config(
  $font-family: $font-family-base
);

@include mat.typography-hierarchy($custom-typography);
@include mat.all-component-typographies($custom-typography);

$allegro-palette-primary: mat.define-palette($mat-allegro);
$allegro-palette-accent: mat.define-palette($mat-allegro, A400, A100, A400);

$sm-palette-primary: mat.define-palette($sm-purple);
$sm-palette-accent: mat.define-palette($sm-purple, A100, A200, A400);
$sm-palette-warn: mat.define-palette(mat.$purple-palette);

$sm-neon-palette-primary: mat.define-palette($sm-neon);
$sm-neon-palette-accent: mat.define-palette($sm-neon, A200, A100, A400);

$dark-theme: mat.define-dark-theme((
  color: (
    primary: $allegro-palette-primary,
    accent: $allegro-palette-accent
  ),
  typography: $custom-typography,
  density: -2
));

$light-theme: mat.define-light-theme((
  color: (
    primary: $allegro-palette-primary,
    accent: $allegro-palette-accent
  ),
  typography: $custom-typography,
));

$sm-theme: mat.define-light-theme((
  color: (
    primary: $sm-palette-primary,
    accent: $sm-palette-accent,
    warn: $sm-palette-warn
  ),
  typography: $custom-typography
));

$sm-neon-theme: mat.define-dark-theme((
  color: (
    primary: $sm-neon-palette-primary,
    accent: $sm-neon-palette-accent,
  ),
  typography: $custom-typography
));

//@include mat.form-field-theme($light-theme);
@include mat.progress-spinner-theme($light-theme);
@include mat.progress-bar-theme($light-theme);
@include mat.datepicker-color($light-theme);
@include mat.tooltip-theme($sm-theme);
@include mat.menu-theme($light-theme);
@include mat.autocomplete-theme($light-theme);
@include mat.select-theme($light-theme);

.dark-outline {
  @include mat.menu-color($dark-theme);
  @include mat.autocomplete-color($dark-theme);
  @include mat.select-color($dark-theme);
}

.dark-theme {
  // @include mat.all-component-themes($dark-theme);
  @include mat.core-theme($dark-theme);
  @include mat.form-field-theme($dark-theme);
  @include mat.input-theme($dark-theme);
  @include mat.dialog-theme($dark-theme);
  @include mat.chips-theme($dark-theme);
  @include mat.button-theme($dark-theme);
  @include mat.fab-theme($dark-theme);
  @include mat.icon-button-theme($dark-theme);
  @include mat.slide-toggle-theme($sm-neon-theme);
  @include mat.slider-theme($sm-neon-theme);
  @include mat.radio-color($dark-theme);
  @include mat.divider-color($dark-theme);
  @include mat.checkbox-theme($dark-theme);
  @include mat.list-theme($dark-theme);
  @include mat.stepper-theme($dark-theme);

  --mdc-typography-body1-letter-spacing: 0;
  --mdc-typography-button-letter-spacing: 0;
  .mat-mdc-slide-toggle{
    --mdc-switch-state-layer-size: 24px;
  }

  .mat-mdc-checkbox .mdc-checkbox {
    --mdc-checkbox-selected-icon-color: #{$purple};
    --mdc-checkbox-selected-hover-icon-color: #{$purple};
    --mdc-checkbox-selected-focus-icon-color: #{$purple};
  }

  .mat-expansion-panel-header-description, .mat-expansion-indicator {
    --mat-expansion-header-indicator-color: #{$blue-300};
  }

  .link {
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
}

.light-theme {
  @include mat.core-color($light-theme);
  @include mat.form-field-color($light-theme);
  @include mat.input-color($light-theme);
  @include mat.dialog-color($light-theme);
  @include mat.chips-color($light-theme);
  @include mat.button-color($light-theme);
  @include mat.fab-color($light-theme);
  @include mat.icon-button-color($light-theme);
  @include mat.slide-toggle-color($sm-theme);
  @include mat.slider-color($sm-theme);
  @include mat.radio-color($sm-theme);
  @include mat.divider-color($light-theme);
  @include mat.checkbox-color($sm-theme);
  @include mat.list-color($light-theme);
  @include mat.stepper-color($sm-theme);

  --mdc-typography-body1-letter-spacing: 0;
  --mdc-typography-button-letter-spacing: 0;
  --mdc-switch-state-layer-size: 24px;

  --bs-border-width: 1px #{$blue-300};

  mat-progress-bar {
    border-radius: 4px;
    box-shadow: 0 0 0 1px $white, 0 0 0 3px lighten($purple, 30%);
    --mdc-linear-progress-active-indicator-color: #{lighten($purple, 10%)};
    --mdc-linear-progress-track-height: 12px;
  }

  .mat-mdc-radio-button, .mat-mdc-radio-button.mat-accent {
    --mdc-radio-disabled-selected-icon-color: #{$blue-300};
    --mdc-radio-disabled-unselected-icon-color: #{$blue-300};
  }

  .mat-drawer {
    border-right: solid 1px $blue-100;
  }

  .mat-expansion-panel-header-description, .mat-expansion-indicator:after {
    color: $blue-300;
  }

  .mat-mdc-nav-list {
    --mdc-list-list-item-label-text-size: 13px;
    --mdc-list-list-item-label-text-weight: 500;
    --mdc-list-list-item-label-text-color: #{$blue-400};
    --mdc-list-list-item-selected-label-text-color: white;

    .mat-mdc-list-item.selected {
      .mat-mdc-menu-item-text, .mdc-list-item__primary-text {
        color: white;
      }
    }
  }

  .inline-code {
    background-color: $blue-50;
    border: 1px solid $blue-100;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-family: $font-family-monospace;
  }

  // MAT STEPPER
  // ------------------------

  .mat-step-header.mat-accent {
     --mat-stepper-header-selected-state-label-text-color: #{$blue-300};
     --mat-stepper-header-focus-state-layer-color: transparent;
  }

  .mat-horizontal-stepper-header-container {
    padding: 0 24px;
  }

  .mat-ripple {display: none;}

  .mat-step-header:hover:not([aria-disabled]),
  .mat-step-header:hover[aria-disabled=false] {
    background-color: unset;
  }

  .mat-step-icon {
    --mat-stepper-header-icon-background-color: #{$white};
    --mat-stepper-header-icon-foreground-color: #{$blue-400};
    border: 2px solid $blue-300;
    transition: border 0.3s;
  }

  .mat-step-icon-selected,
  .mat-step-icon-state-edit {
    border-color: $purple;
  }

  .mat-step-label {
    min-width: 30px;
  }

  .mat-step-text-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .mat-step-label.mat-step-label-active.mat-step-label-selected {
     --mat-stepper-header-selected-state-label-text-color: #{$purple};
  }

}

* {
  outline: none !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: $font-family-base;
  font-size: 14px;
  overflow: hidden;
}


.al-header {
  font-weight: 500;
  margin: 0;
}

h3.al-header {
  font-size: 15px;
}

h4.al-header {
  font-size: 14px;
}

h5.al-header {
  font-weight: normal;
}

.font-weight-bold {
  font-weight: bold;
}

span.highlight-text {
  background: $neon-yellow;
  border: 1px solid darken($neon-yellow, 5%);
  border-radius: 4px;
  padding: 0 2px;

  &.current-match {
    background: #f5d655;
    border: 1px solid darken(#f5d655, 15%);
  }
}

hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .1);

  &.dark {
    border-top: 1px solid $blue-600;
  }
}

.pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.pointer-events-none {
  pointer-events: none;
}

.noselect {
  user-select: none;
}

.grab {
  cursor: grab;
}

.al-danger {
  background: #ffcccc !important;

  &:hover {
    background: #ffb4b4 !important;
  }

  &:active {
    background: #ff7272 !important;
  }
}

//// fix for calendar v15 mix with v14
//.dark-theme, .light-theme {
//  .mat-datepicker-content {
//    .mat-mdc-icon-button.mat-mdc-button-base {
//      width: 40px;
//      height: 40px;
//      padding: 8px;
//    }
//
//    .mat-calendar-body-selected {
//      background-color: $blue-200;
//    }
//
//    .mat-mdc-button:not(:disabled) {
//      color: $blue-700;
//    }
//
//    .mat-calendar-body-label, .mat-calendar-period-button {
//      font-size: 14px;
//      font-weight: 500;
//    }
//
//    .mat-calendar-hidden-label {
//      display: none;
//    }
//  }
//}

mat-expansion-panel {
  box-shadow: unset !important;

  .mat-expansion-panel-header {
    margin-bottom: 0;
  }
}

.al-empty-collapse .mat-expansion-panel-header-title .al-header.sub-header {
  color: #ced1db;
}

.mat-expansion-panel-header.al-empty-collapse {
  pointer-events: none;
}

.al-empty-collapse .mat-expansion-indicator {
  display: none;
}

.al-success {
  background: #effff1 !important;
}

.al-primary {
  background: $faint-gray !important;
}

.mat-mdc-radio-button {
  --mdc-radio-state-layer-size: 16px;

  .mdc-radio {
    height: 16px;
    width: 16px;
  }

  .mdc-radio__background {
    width: 16px;
    height: 16px;

    .mdc-radio__inner-circle {
      border-width: 8px;
    }
  }

  .mat-ripple.mat-radio-ripple {
    height: 32px;
    width: 32px;
    left: calc(50% - 16px);
    top: calc(50% - 16px);
  }
}

button {
  cursor: pointer;

  &[disabled] {
    cursor: default !important;
  }
}

// utility to display a pointer
.pointer {
  cursor: pointer;
}

.color-neon-yellow {
  color: $neon-yellow !important;
}

.background-neon-green {
  background-color: $neon-green !important;
}

.background-neon-yellow {
  background-color: $neon-yellow !important;
}

.color-neon-green {
  color: $neon-green;
}

.border-radius {
  border-radius: 4px;
}

.grabbing {
  cursor: grab;

  &:active {
    cursor: grabbing;
  }
}

.flex-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.empty-menu {
  height: 100px;
  font-size: 14px;
  --mat-menu-item-label-text-tracking: 0;
}

.capital-case {
  text-transform: capitalize;
}

.upper-case {
  text-transform: uppercase;
}


.vcenter {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
}

.vertical-middle-middle {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.vertical-middle-left {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body .ui-state-highlight .card {
  background-color: #0275d8;
}

.hidden {
  display: none;
}

.hidden-important {
  display: none !important;
}

.card-margin {
  margin: 15px;
}

.selected-tab {
  color: chartreuse;
}

body .ui-multiselect {
  background: #ffffff;
  padding: 0;
  border: none;

  label.ui-multiselect-label.ui-corner-all:after {
    content: "\F0D7";
    padding-left: 5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
  }
}

.ui-multiselect-panel .ui-multiselect-list {
  border-radius: 0;
}

.ui-multiselect-panel .ui-multiselect-items-wrapper {
  padding: 0;
}

.ui-multiselect .ui-multiselect-label {
  padding: 12px;
  margin: 0;
}

body .ui-multiselect .ui-multiselect-header {
  display: none;
}

body .ui-multiselect-panel .ui-multiselect-item label {
  vertical-align: inherit;
  cursor: pointer;
}

body .table th, .table td {
  padding: inherit;
}

body .sub-table {
  width: 100%;

  .labeled-row {
    margin-top: 0;
    margin-bottom: 0;
    //background-color: #f7f7f7;
    width: 100%;
  }
}

body .alignTop {
  vertical-align: top;
}

body .clean-list {
  list-style-type: none;
}

.mat-mdc-tooltip {
  &.sm-tooltip {
    --mdc-plain-tooltip-container-color: #{$purple};

    .mdc-tooltip__surface {
      max-width: 400px;
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: 0.3px;
    }

    &.validation {
      .mdc-tooltip__surface {
        --mdc-plain-tooltip-container-color: #{$strong-red};
      }
    }

    &.break-line {
      .mdc-tooltip__surface {
        white-space: pre-line;
      }
    }
  }

  &.parameter-tooltip {
    margin: 6px auto 6px -74px;
  }
}

// --------------------------------old------------------------------------------
@import "shared/ui-components/styles/index";

.mat-mdc-dialog-container {
  box-shadow: none !important;
  background-color: transparent !important;
}

.sm-mat-dialog-panel {
  border: $blue-600 1px solid;
  border-radius: 4px;
}

* table .ui-datatable-data {
  -moz-user-select: none;
}

// material are stupid...
html {
  &.cdk-global-scrollblock {
    top: 0 !important;
    position: initial !important;
    overflow: hidden;
  }

  .mat-mdc-menu-panel.mat-mdc-menu-panel {
    max-width: 450px;
    min-width: 114px;
    min-height: 32px;

    &.custom-columns {
      width: 370px;

    }

    sm-checkbox-three-state-list {
      min-width: 160px;
      display: block;
    }
  }

  .ico-chk {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
  }
}

.sm-menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $blue-200;
  font-weight: normal;
  border-bottom: 1px solid $blue-500;
  font-size: 14px;
  min-height: 48px;
}

.light-theme {
  .mat-mdc-menu-content {
    .sm-menu-header {
      background: $blue-25;
      color: $blue-400;
      border-bottom: 1px solid $blue-200;
    }

    .mat-mdc-menu-item {
      &.cdk-keyboard-focused, &.cdk-program-focused {
        color: rgba(0, 0, 0, 0.87);
      }

      &.mat-mdc-focus-indicator {
        --mat-menu-item-hover-state-layer-color: #{$blue-50};
      }

      .mat-mdc-menu-item-text, .mdc-list-item__primary-text {
        --mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
      }
    }
  }
}

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

  .mat-mdc-menu-item {
    margin: 0 4px;
    width: calc(100% - 8px);
    height: 40px;
    min-height: 40px;
    --mat-menu-item-label-text-line-height: 20px;
    --mat-menu-item-label-text-size: 14px;
    padding: 0 12px;
    border-radius: 4px;

    .mat-icon {
      margin-right: 12px;
    }


    .mat-mdc-menu-item-text, .mdc-list-item__primary-text {
      --mat-menu-item-label-text-tracking: 0;
      display: flex;
      align-items: center;
      gap: 0 12px;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  hr {
    margin: 4px 0;
  }
}

.mat-mdc-list-item {
  --mdc-list-list-item-label-text-size: 14px;
  --mdc-list-list-item-label-text-line-height: 40px;
  --mdc-list-list-item-one-line-container-height: 40px;
}

// hide arrows for number inputs
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

// hide arrows for number inputs (FireFox)
input[type=number] {
  -moz-appearance: textfield !important;
}

.js-plotly-plot .plotly .modebar {
  z-index: 11 !important;
}


// SPILTTER
// ------------------------------

as-split {
  &.as-dragging {
    .as-split-area {
      transition: opacity 0.5s;
    }
    .as-split-gutter-icon {
      display: none;
    }
  }

  .as-split-area {
    transition: flex-basis .5s;
  }

  &.as-horizontal {
    & > .as-split-gutter {
      position: relative;
      background-color: $dark-border !important;

      &::before {
        // splitter vertical line
        content: "";
        display: block;
        width: 2px;
        position: absolute;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: -1px;
        background-color: transparent;
      }
      &:hover::before {
        background-color: $purple;
        transition: background-color 0.2s ease 0.2s;
      }

      &::after {
        // splitter area handle
        content: "";
        position: absolute;
        z-index: 101;
        top: 0;
        bottom: 0;
        width: 10px;
      }

      .as-split-gutter-icon {
        // arrow circle icon
        display: none;
        position: absolute;
        z-index: 101;
        width: 20px !important;
        height: 20px !important;
        background-image: none !important;
        border: none !important;
        border-radius: 20px;
        &::after {
          // arrow
          content: "";
          display: inline-block;
          padding: 2px;
          position: absolute;
          top: 8px;
          border: solid lighten($purple, 30%);
        }
      }
    }
  }

  &.closed.as-horizontal {
    > .as-split-gutter {
        .as-split-gutter-icon {
          display: block;
          left: -10px;
          background: $purple !important;
          &::after {
            // arrow direction right
            left: 6px;
            border-width: 0 2px 2px 0;
            transform: rotate(-45deg);
          }
        }
    }
    > .as-split-area:nth-child(1) {
      opacity: 0;
    }
  }
  &.opened.as-horizontal {
    > .as-split-gutter {
        &:hover::before {
          left: auto;
          right: -1px;
        }
        .as-split-gutter-icon {
          display: block;
          right: -10px;
          background: $purple !important;
          &::after {
            // arrow direction left
            left: 8px;
            border-width: 0 2px 2px 0;
            transform: rotate(135deg);
          }
        }
    }
    > .as-split-area:nth-child(2) {
      opacity: 0;
    }
  }

}

as-split.as-horizontal.light-theme > .as-split-gutter {
  background-color: #dee1e9 !important;
}

// splitter shown on light background
as-split.as-horizontal:not(.closed, .opened) as-split-area.light-theme + .as-split-gutter {
  &::before {
    left: 1px;
    width: 3px;
  }
  &::after {
    left: 0;
  }
}

.notifier__container {
  ul {
    margin: 0;
  }
}

$type-colors: (
  string: #ff8400,
  number: $neon-yellow,
  boolean: #b938a4,
  date: #05668D,
);


.mat-expansion-panel.allegro-style {
  width: 100%;
  background-color: $blue-500;
  box-shadow: unset !important;

  .mat-expansion-panel-header {
    height: 25px !important;
    max-height: 25px;
    font-size: 13px;

    &:hover {
      background: rgba(0, 0, 0, .04);
    }

    .mat-content {
      flex: unset;
    }

    .mat-expansion-panel-header-title, .mat-expansion-indicator:after {
      margin-bottom: 3px;
      flex: unset;
      color: $blue-300;
      align-items: baseline;
    }

    .mat-expansion-indicator {
      margin-left: auto;
      height: 15px;

    }
  }
}

.cdk-overlay-pane.mat-mdc-dialog-panel {
  --mat-dialog-container-max-width: 100vw;
}

.image-viewer-dialog {
  .mat-mdc-dialog-container {
    padding: 0;
    border-radius: 0;
  }
}

//material menu
body .mat-mdc-menu-content:not(:empty) {
  .search-results {
    overflow: auto;
  }

  .fixed-options-subheader {
    padding: 8px 16px 0;
    opacity: 0.5;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
  }
}

.hyper-parameters-tooltip {
  white-space: pre-line;
  text-align: left !important;
  font-size: 14px !important;
}

button.btn.button-outline-dark {
  height: 28px;
  padding: 6px 12px 5px;
  border: solid 1px $blue-500;
  border-radius: 4px;
  background-color: transparent;
  color: $blue-280;
  font-weight: 500;
  font-size: 11px;

  &:disabled {
    color: $blue-280;
  }

  &:hover:not(:disabled) {
    color: $blue-280;
    background-color: $blue-600;
    border-color: $blue-600;
  }
}

.i-welcome-researcher {
  background-image: url('./assets/icons/welcome-researcher.svg');
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: contain;
  display: inline-block;
}

.sm-card-list-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, 352px);
  grid-gap: 24px;
  padding: 0 24px 24px;
  justify-content: center;

  .load-more {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px;
    grid-column: 1 / -1;

    .load-more-btn {
      padding: 8px 40px;
    }
  }
}

.sm-card-list-header {
  display: flex;
  justify-content: space-between;
  height: inherit;
  align-items: center;

  .recent-title {
    display: flex;
    align-items: center;
    font-size: 12px;

    & > .menu {
      color: $blue-300;
      font-weight: 500;
      cursor: pointer;
      margin-right: 16px;
    }
  }
}

.cdk-overlay-backdrop.darker {
  background-color: rgba(0, 0, 0, 0.8);
}

.cdk-drag-preview.form-group-drag {
  padding: 8px 16px 32px 16px;
  border-radius: 4px;
  border: solid 1px $cloudy-blue;
  background-color: white;
}

.ace_placeholder {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  color: $blue-300 !important;
}

.modebar-btn[data-attr="plotly-embedded-modebar-button"] {
  path {
    fill: $orangada !important;
  }

  &:hover path {
    fill: rgb(77, 102, 255) !important;
  }
}

#print-element-temp {
  display: none;
}

@media print {
  * {
    color: black !important;
  }

  html, body, .content, .info-content {
    overflow: visible !important;
  }

  sm-side-nav,
  .actions button, .actions .add-button,
  .content.report .mat-drawer, .report .hover-button {
    display: none !important;
  }

  .md-layout #print-element {
    padding: 0 !important
  }
  .content.report .mat-drawer-content {
    margin-left: unset !important
  }
  .content.report .mat-drawer-content,
  .content.report .mat-drawer-container {
    overflow: visible !important;
  }

  .md-editor-container,
  .preview-panel {
    border: none !important;
  }

  .header-container,
  .header,
  .content {
    max-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.cml-dialog {
  border-radius: 4px;

  .mdc-dialog .mdc-dialog__content {
    padding: 0 32px;
    max-height: 90vh;
  }

  .mdc-dialog__actions {
    padding: 24px 0;
    justify-content: center;
  }
}

.select-panel-width {
  min-width: fit-content;
  max-width: 50vw !important;
}

.background-transparent {
  .mat-mdc-dialog-container {
    --mdc-dialog-container-color: transparent;
  }
}

.btn-check:checked + .dark-theme .btn,
:not(.btn-check) + .dark-theme .btn:active
{
  --bs-btn-active-border-color: transparent;
}

//.pallete-cursor {
//  cursor: url(../assets/icons/pallete-cursor.svg) 6 0, pointer;
//}
