@use "sass:color";
@use "sass:map";
@use 'fonts/poppins.scss';
@use 'styles/ontimize/variables.scss';
@use '@angular/material' as mat;
@use '@angular/cdk';
@use 'styles/ontimize/typography-ontimize.scss';
@use 'typography/ontimize.scss' as ontimize;
@use 'ontimize-style-v8.scss' as ontimize-style;

/*Sidenav background-color*/
$sidenav-background-color: #f5f5f5;

// Background palette for light themes.
@function ontimize-light-theme-background($primary, $mat-theme) {
  $primary-500: mat.get-color-from-palette($primary, 500);
  $background: map.get($mat-theme, background);
  @return map.merge($background,
    (level-0: mix(variables.$app-background-color, $primary-500, 98%),
      level-04: #f2f2f2,
      level-06: #f6f6f6,
      level-08: #fafafa,
      level-1: white,
      sidenav-overlay: #525252,
      status-bar: mix($sidenav-background-color, mat.get-color-from-palette($primary), 97.2%),
      app-bar: mix($sidenav-background-color, mat.get-color-from-palette($primary), 97.2%),
      background: mix(variables.$app-background-color, mat.get-color-from-palette($primary), 97.2%)));
}

// Background palette for dark themes.
@function ontimize-dark-theme-background($primary, $mat-theme) {
  $primary-500: mat.get-color-from-palette($primary, 500);
  $background: map.get($mat-theme, background);
  @return map.merge($background,
    (level-0: mix(#171717, $primary-500, 94%),
      level-04: mix(#1E1E1E, $primary-500, 94%),
      level-06: mix(#2C2C2C, $primary-500, 94%),
      level-08: mix(#333333, $primary-500, 94%),
      level-1: mix(#383838, $primary-500, 94%),
      sidenav-overlay: #525252,
      status-bar: mix(#272727, $primary-500, 94%)));
}

// Foreground palette for light themes.
$ontimize-light-theme-foreground: (
  base: rgba(black, 0.6),
  divider: rgba(black, 0.12),
  dividers: rgba(black, 0.12),
  disabled: rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text: rgba(black, 0.38),
  elevation: black,
  hint-text: rgba(black, 0.38),
  secondary-text: rgba(black, 0.54),
  title: rgba(black, 0.87),
  icon: rgba(black, 0.6),
  icons: rgba(black, 0.6),
  text: rgba(black, 0.87),
  slider-min: rgba(black, 0.38),
  slider-off: rgba(black, 0.38),
  slider-off-active: rgba(black, 0.38),
  button: rgba(black, 0.74)
);

// Foreground palette for dark themes.
$ontimize-dark-theme-foreground: (
  base: rgba(white, 0.6),
  divider: rgba(white, 0.12),
  dividers: rgba(white, 0.12),
  disabled: rgba(white, 0.38),
  disabled-button: rgba(white, 0.38),
  disabled-text: rgba(white, 0.38),
  elevation: black,
  hint-text: rgba(white, 0.38),
  secondary-text: rgba(white, 0.54),
  title: rgba(white, 0.87),
  icon: rgba(white, 0.6),
  icons: rgba(white, 0.6),
  text: rgba(white, 0.87),
  slider-min: rgba(white, 0.38),
  slider-off: rgba(white, 0.38),
  slider-off-active: rgba(white, 0.38),
  button: rgba(white, 0.74)
);


// Creates a container object for a light theme to be given to individual component theme mixins.
@function o-mat-light-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
  $mat-theme: mat.define-light-theme((color:(primary: $primary, accent: $accent, warn: $warn)));
  $color: map.get($mat-theme, color);
  @return (color:(primary: $primary,
      accent: $accent,
      warn: $warn,
      is-dark: false,
      foreground: $ontimize-light-theme-foreground,
      background: ontimize-light-theme-background($primary, $color)),
    typography:ontimize.$typography)
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
@function o-mat-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
  $mat-theme: mat.define-dark-theme((color:(primary: $primary, accent: $accent, warn: $warn)));
  $color: map.get($mat-theme, color);
  @return (color:(primary: $primary,
      accent: $accent,
      warn: $warn,
      is-dark: true,
      foreground: $ontimize-dark-theme-foreground,
      background: ontimize-dark-theme-background($primary, $color)),
    typography:ontimize.$typography)
}

@mixin mat-checkbox-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $is-dark-theme: map.get($theme, is-dark);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  // The color of the checkbox's checkmark / mixedmark.
  $checkbox-mark-color: mat.get-color-from-palette($background, background);

  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
  // this does not work well with elements layered on top of one another. To get around this we
  // blend the colors together based on the base color and the theme background.
  $white-30pct-opacity-on-dark: #686868;
  $black-26pct-opacity-on-light: #b0b0b0;
  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
  $checkbox-background-color: if($is-dark-theme, $black-26pct-opacity-on-light, mat.get-color-from-palette($background, sidenav-overlay));

  /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
  .mat-checkbox-frame {
    border-color: mat.get-color-from-palette($foreground, secondary-text);
  }

  /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
  .mat-checkbox-checkmark {
    fill: $checkbox-mark-color;
  }

  /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
  .mat-checkbox-checkmark-path {
    // !important is needed here because a stroke must be set as an
    // attribute on the SVG in order for line animation to work properly.
    stroke: $checkbox-mark-color !important;

    @include cdk.high-contrast(black-on-white) {
      // Having the one above be !important ends up overriding the browser's automatic
      // color inversion so we need to re-invert it ourselves for black-on-white.
      stroke: #000 !important;
    }
  }

  .mdc-checkbox__mixedmark {
    background-color: $checkbox-mark-color;
  }

  .mat-mdc-checkbox-checked,
  .mat-mdc-checkbox-indeterminate {

    &.mat-primary .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
      background-color: $checkbox-background-color;
    }

    &.mat-accent .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
      background-color: $checkbox-background-color;
    }

    &.mat-warn .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
      background-color: mat.get-color-from-palette($warn);
    }
  }

  .mat-mdc-checkbox-disabled {

    &.mat-mdc-checkbox-checked,
    &.mat-checkbox-indeterminate {

      .mdc-checkbox__background {
        background-color: $disabled-color;
      }
    }


    &:not(.mat-mdc-checkbox-checked) {

      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
      .mat-checkbox-frame {
        border-color: $disabled-color;
      }
    }


    @include cdk.high-contrast {
      opacity: .5;
    }
  }

  // This one is moved down here so it can target both
  // the theme colors and the disabled state.
  @include cdk.high-contrast {

    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    .mat-checkbox-background {
      // Needs to be removed because it hides the checkbox outline.
      background: none;
    }
  }

  // Switch this to a solid color since we're using `opacity`
  // to control how opaque the ripple should be.
  .mat-mdc-checkbox .mat-ripple-element {
    background-color: map.get(map.get($theme, foreground), base);
  }

  .mat-mdc-checkbox-checked:not(.mat-checkbox-disabled),
  .mat-checkbox:active:not(.mat-checkbox-disabled) {
    &.mat-primary .mat-ripple-element {
      background: mat.get-color-from-palette($foreground, icon);
    }

    &.mat-accent .mat-ripple-element {
      background: mat.get-color-from-palette($foreground, icon);
    }

    &.mat-warn .mat-ripple-element {
      background: mat.get-color-from-palette($warn);
    }
  }
}

@mixin mat-pseudo-checkbox-theme($theme-or-color-config) {

  $theme: map.get($theme-or-color-config, color);
  $is-dark-theme: map.get($theme, is-dark);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: map.get($theme, warn);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);

  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
  // this does not work well with elements layered on top of one another. To get around this we
  // blend the colors together based on the base color and the theme background.
  $white-30pct-opacity-on-dark: #686868;
  $black-26pct-opacity-on-light: #b0b0b0;
  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';

  .mat-mdc-select-panel {

    &.mat-primary,
    &.mat-accent {
      .mat-pseudo-checkbox-checked {
        background-color: transparent;
      }
    }
  }

  .mat-pseudo-checkbox {
    color: mat.get-color-from-palette(map.get($theme, foreground), secondary-text);

    &::after {
      color: mat.get-color-from-palette($background, background);
    }
  }

  .mat-pseudo-checkbox-disabled {
    color: $disabled-color;
  }

  .mat-primary .mat-pseudo-checkbox-checked,
  .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: mat.get-color-from-palette($foreground, icon);
  }

  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
  // theme from their parent, rather than implementing their own theming, which is why we
  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
  .mat-accent .mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox-indeterminate,
  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate {
    background: mat.get-color-from-palette($foreground, icon);
  }

  .mat-warn .mat-pseudo-checkbox-checked,
  .mat-warn .mat-pseudo-checkbox-indeterminate {
    background: mat.get-color-from-palette(map.get($theme, warn));
  }

  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate {
    &.mat-pseudo-checkbox-disabled {
      background: $disabled-color;
    }
  }
}

@mixin ontimize-theme-all-component-color($theme-or-color-config) {
  $color: map.get($theme-or-color-config, color);
  @include ontimize-theme-styles((color: $color,
      typography: null,
      density: null,
    ));
}

@mixin ontimize-theme-styles($theme-or-color-config) {

  $typography: mat.get-typography-config($theme-or-color-config);
  //Apply v8 styles
  @include ontimize-style.ontimize-theme-styles($theme-or-color-config);
  //Apply new styles
  @include mat-checkbox-theme($theme-or-color-config);
  @include mat-pseudo-checkbox-theme($theme-or-color-config);

  @if($typography) {
    @include typography-ontimize.o-table-typography-fashion($typography);
    @include typography-ontimize.o-common-typography-fashion($typography);
    @include typography-ontimize.o-form-theme-fashion($typography);
  }

  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $warn: mat.get-color-from-palette($theme, warn);
  $is-dark-theme: map.get($theme, is-dark);
  $background-primary-button: if($is-dark-theme, transparent, #ffffff);
  $background-hover-primary-button: if($is-dark-theme, mat.get-color-from-palette($primary, 500, 0.04), mat.get-color-from-palette($primary, 100));
  $background-accent-button: if($is-dark-theme, transparent, #ffffff);
  $background-hover-accent-button: if($is-dark-theme, mat.get-color-from-palette($accent, 500, 0.04), mat.get-color-from-palette($accent, 100));
  $background-hover-warn-button: if($is-dark-theme, mat.get-color-from-palette($warn, 500, 0.04), mat.get-color-from-palette($warn, 100));
  $sidenav-background-color: if($is-dark-theme, mix(#1e1e1e, mat.get-color-from-palette($primary, 500), 94%), mat.get-color-from-palette($background, status-bar));

  .o-app-header {
    nav {
      &.o-app-header-primary {
        background-color: $sidenav-background-color;
      }

      &.o-app-header-accent {
        background-color: $sidenav-background-color;
      }

      .o-app-header-title {
        color: mat.get-color-from-palette($foreground, button);
      }
    }
  }

  .o-app-sidenav {
    font-weight: 400;

    .o-app-sidenav-menu-group,
    .o-app-sidenav-menu-item {
      a {
        margin-left: 0 !important;
        border-left: 8px solid transparent;
      }

      &:not([disabled='true']) {
        border-left-color: transparent;

        a:hover {
          color: mat.get-color-from-palette($foreground, button);
          background-color: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 96%); //#525252 4%
          border-left: 8px solid mat.get-color-from-palette($primary);
        }

        a.o-app-sidenav-viewer-sidenav-item-selected {
          color: mat.get-color-from-palette($foreground, button);
          background-color: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 98%); //#525252 2%
          border-left: 8px solid mat.get-color-from-palette($primary);
        }
      }
    }

    .o-app-sidenav-sidenav {
      background: $sidenav-background-color;

      .sidenav-toggle {
        color: mat.get-color-from-palette($foreground, button);
      }

      .o-app-sidenav-item {
        color: mat.get-color-from-palette($foreground, button);

        &.o-user-info {

          &:focus,
          &:hover {
            color: inherit;
          }

          color: inherit;

          .o-user-info-menu-item .o-user-info-item {
            background: mat.get-color-from-palette($primary, default-contrast, 0.74);
          }
        }
      }

      /* Side Navigation Level Styles */
      .o-app-sidenav-menu-group-level-1 {
        .o-app-sidenav-menugroup {
          &.opened {
            +.o-app-sidenav-menugroup-items-container ul {
              background: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 94%); //#525252 6%
            }
          }
        }

        .o-app-sidenav-menu-item {
          &:not([disabled='true']) {

            // a.o-app-sidenav-viewer-sidenav-item-selected,
            a:hover {
              background-color: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 94%); //#525252 6%
            }
          }
        }
      }

      .o-app-sidenav-menu-group-level-2,
      .o-app-sidenav-menu-group-level-3,
      .o-app-sidenav-menu-group-level-4 {
        .o-app-sidenav-menugroup {
          &.opened {
            +.o-app-sidenav-menugroup-items-container ul {
              background: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 88%); //#525252 12%
            }
          }
        }

        .o-app-sidenav-menu-item {
          &:not([disabled='true']) {

            // a.o-app-sidenav-viewer-sidenav-item-selected,
            a:hover {
              background-color: color.mix($sidenav-background-color, mat.get-color-from-palette($background, sidenav-overlay), 88%); //#525252 12%
            }
          }
        }
      }

      li a {
        color: mat.get-color-from-palette($foreground, text);
      }
    }
  }

  .o-app-sidenav-container {
    .mat-drawer.o-app-sidenav-sidenav.mat-drawer-closed {
      nav {

        .o-app-sidenav-menu-group,
        .o-app-sidenav-menu-item {

          a {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
          }
        }
      }
    }
  }

  o-app-sidenav.o-app-sidenav,
  o-app-sidenav.o-app-sidenav.header-layout {
    .o-app-sidenav-container {
      .o-app-header {
        /*box-shadow: none;*/
        border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
        background-color: $sidenav-background-color;
      }

      mat-sidenav.mat-drawer.o-app-sidenav-sidenav {
        box-shadow: none;
        border-right: none;

        .o-app-sidenav-menugroup.active+.o-app-sidenav-menugroup-items-container ul {
          box-shadow: none;
          background: none;
        }
      }
    }

    .mat-mdc-menu-panel {
      border: 1px solid mat.get-color-from-palette($foreground, divider);
    }

    .o-app-header {
      .o-user-info {
        .o-user-info-wrapper {
          font-weight: 500;
          // color: white;
        }
      }
    }
  }

  .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: mat.get-color-from-palette($foreground, title);
  }

  /* MAT PAGINATOR*/
  .mat-mdc-paginator {
    color: mat.get-color-from-palette($foreground, text);
  }

  .ontimize-table.o-table {
    background: mat.get-color-from-palette($background, card);

    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    tbody td.o-table-column-select-checkbox .mat-checkbox-inner-container .mat-checkbox-background,
    thead tr th.o-table-column-select-checkbox .mat-checkbox-inner-container .mat-checkbox-background {
      background-color: mat.get-color-from-palette($foreground, icon);
    }

  }

  .o-tree {
    .selected-node {
      color: mat.get-color-from-palette($primary, 500);
      font-weight: 800;
    }
  }

  .o-table {
    .o-table-quickfilter .quickFilter .mat-form-field .mat-mdc-text-field-wrapper .mat-form-field-flex .mat-form-field-prefix div {
      border-color: mat.get-color-from-palette($foreground, text, 0.32);
    }

    .mat-form-field-appearance-outline .mat-form-field-outline {
      color: mat.get-color-from-palette($foreground, text, 0.32);
    }

    .mat-mdc-table {
      .mat-mdc-row {


        .mat-mdc-cell {
          color: mat.get-color-from-palette($foreground, base);
        }
      }
    }
  }

  /* FORM */
  .o-form {
    .o-form-toolbar {
      margin-bottom: 24px;

      .o-form-toolbar-header {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.24);
        background-color: mat.get-color-from-palette($background, card);

        .mat-toolbar-tools {
          button.o-form-toolbar-button.o-form-toolbar-back.mat-mdc-icon-button {
            margin-right: 32px;
          }

        }
      }
    }
  }

  .mat-mdc-dialog-actions button:not([disabled]),
  .o-form .o-form-toolbar button:not([disabled]),
  .o-grid .o-grid-footer button:not([disabled]),
  .o-grid .o-grid-toolbar>button:not([disabled]),
  .o-list .o-list-toolbar>button:not([disabled]),
  .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons button:not([disabled]),
  button.mat-mdc-outlined-button:not([disabled]) {
    &.mat-mdc-button-base {
      border-color: mat.get-color-from-palette($foreground, text, 0.32);
    }

    &.mat-mdc-button-base.mat-primary,
    &.mat-mdc-button-base.o-button-primary {
      color: mat.get-color-from-palette($primary, 500);
      background-color: $background-primary-button;
      border-color: mat.get-color-from-palette($foreground, text, 0.32);

      .mat-icon {
        color: mat.get-color-from-palette($primary, 500);

      }

      &:hover {
        background-color: $background-hover-primary-button;
        border-color: mat.get-color-from-palette($foreground, text, 0.32);
      }

    }

    &.mat-mdc-button-base.mat-accent,
    &.mat-mdc-button-base.o-button-default {
      color: mat.get-color-from-palette($foreground, text);
      border-color: mat.get-color-from-palette($foreground, text, 0.32);

      .mat-icon {
        color: mat.get-color-from-palette($accent, 500);
      }

      &:hover {
        color: mat.get-color-from-palette($accent, 500);
        background-color: $background-hover-accent-button;
        border-color: mat.get-color-from-palette($foreground, text, 0.32);
      }
    }

    &.mat-mdc-button-base.mat-warn {
      color: mat.get-color-from-palette($warn);
      border-color: mat.get-color-from-palette($foreground, text, 0.32);

      &:hover {
        background-color: $background-hover-warn-button;
        border-color: mat.get-color-from-palette($foreground, text, 0.32);
      }
    }
  }

  .o-button button.mat-stroked-button:not([disabled])mat-mdc-button-base {
    &.mat-accent {
      color: mat.get-color-from-palette($accent, 500);
    }
  }

  .o-form .mat-toolbar-tools .o-form-navigation~.o-form-toolbar-button,
  .o-grid .o-grid-toolbar button,
  .o-list .o-list-toolbar button,
  .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons button {
    &.mat-mdc-icon-button:not(.mat-mdc-menu-trigger) {
      border-color: mat.get-color-from-palette($foreground, text, 0.32);
      border-style: solid;
      border-width: 1px;
      border-radius: variables.$border-radius;
      line-height: variables.$button-line-height-width-border;
    }
  }

  .o-form .o-form-toolbar-header .mat-toolbar-tools .o-form-navigation~.o-form-toolbar-button.mat-mdc-icon-button:not(.mat-mdc-menu-trigger) {
    margin: 0 6px;
  }

  // O-ROW, O-COLUMN
  o-column.o-column,
  o-row.o-row {
    background: mat.get-color-from-palette($background, card);
    border-radius: variables.$border-radius;

    .o-container {
      .o-container-title {
        padding: 20px 0;
      }

      >.o-container-header,
      >.o-container-title,
      >.mat-expansion-panel-header {
        border-bottom: none;
        color: mat.get-color-from-palette($foreground, title);

        .mat-mdc-tab,
        .mat-mdc-tab-link {
          color: mat.get-color-from-palette($foreground, title);
        }
      }

      @if($typography) {

        >.o-container-title,
        >.mat-expansion-panel-header .o-container-title {
          span {
            font: {
              size: mat.font-size($typography, headline-6);
              weight: bold;
            }
          }
        }
      }

      .o-container-scroll {
        &.o-container-gap {
          padding: 12px 16px 16px;
        }
      }
    }
  }

  o-column.o-column.top-separator,
  o-row.o-row.top-separator {
    margin-top: 14px;
  }

  /*background levels */
  .bg-level-0,
  o-column.o-column.bg-level-0,
  o-row.o-row.bg-level-0 {
    background-color: mat.get-color-from-palette($background, level-0);
  }

  .bg-level-04,
  o-column.o-column.bg-level-04,
  o-row.o-row.bg-level-04 {
    background-color: mat.get-color-from-palette($background, level-04);
  }

  .bg-level-06,
  o-column.o-column.bg-level-06,
  o-row.o-row.bg-level-06 {
    background-color: mat.get-color-from-palette($background, level-06);
  }

  .bg-level-08,
  o-column.o-column.bg-level-08,
  o-row.o-row.bg-level-08 {
    background-color: mat.get-color-from-palette($background, level-08);
  }

  .bg-level-1,
  o-column.o-column.bg-level-1,
  o-row.o-row.bg-level-1 {
    background-color: mat.get-color-from-palette($background, level-1);
  }

  .o-form-content-wrapper,
  .o-form-toolbar {
    &[layout-padding] {
      padding: 0;
    }
  }

  .o-table-skeleton-header {
    background-color: mat.get-color-from-palette($background, level-04);
  }

  .o-grid-skeleton-item,
  .o-table .o-table-skeleton-item,
  .o-list-skeleton-item {
    div.skeleton-loader {
      background: mat.get-color-from-palette($background, level-04) no-repeat;
    }
  }

  .o-list-skeleton-item {
    background-color: mat.get-color-from-palette($background, level-08);
    border-radius: variables.$border-radius;
  }

}