@use '@angular/material'as mat;
@use "sass:map";

// Create a theme.
@mixin o-material-theme($theme-or-color-config, $typographyConfig: null) {

  //merge $typographyConfig in $theme-or-color-config
  @if $typographyConfig !=null {
    $theme-or-color-config: map.merge($theme-or-color-config, 'typography', $typographyConfig);
  }


  //Include theme styles for core and each component used in your app.;
  $typography: map.get($theme-or-color-config, typography);

  @if($typography) {
    @include mat.core();
    @include mat.all-component-themes($theme-or-color-config);
  }

  @else {
    @include mat.all-component-colors($theme-or-color-config);
  }

  $typography: mat.get-typography-config($theme-or-color-config);

  @include app-global-theme($theme-or-color-config);
  @include o-breadcrumb-theme($theme-or-color-config);
  @include o-container-theme($theme-or-color-config);
  @include o-form-toolbar-theme($theme-or-color-config);
  @include input-theme($theme-or-color-config);
  @include o-date-input-theme($theme-or-color-config);
  @include o-dialog-theme($theme-or-color-config);
  @include o-table-theme($theme-or-color-config);
  @include o-list-theme($theme-or-color-config);
  @include o-list-picker-theme($theme-or-color-config);
  @include o-app-header-theme($theme-or-color-config);
  @include o-app-sidenav-theme($theme-or-color-config);
  @include o-app-layout-theme($theme-or-color-config);
  @include o-card-menu-item-theme($theme-or-color-config);
  @include o-hour-input-theme($theme-or-color-config);
  @include o-form-layout-split-pane-theme($theme-or-color-config);
  @include o-form-layout-tabgroup-theme($theme-or-color-config);
  @include o-bar-menu-theme($theme-or-color-config);
  @include o-grid-theme($theme-or-color-config);
  @include o-layout-padding-margin();
  @include o-daterange-input-theme($theme-or-color-config);
  @include o-dual-list-selector-theme($theme-or-color-config);
  @include o-image-theme($theme-or-color-config);
}@mixin o-app-header-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $foreground: map.get($theme, foreground);

  .o-app-header {
    nav {
      &.o-app-header-primary {
        background-color: mat.get-color-from-palette($primary);
      }

      &.o-app-header-accent {
        background-color: mat.get-color-from-palette($accent);
      }

      .menu-button {
        background: transparent;
      }
    }

    .o-user-info {
      color: mat.get-color-from-palette($foreground, text);
    }
  }

}@mixin o-app-sidenav-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);

  .o-app-sidenav {

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

        a.o-app-sidenav-viewer-sidenav-item-selected,
        a:hover {
          color: mat.get-color-from-palette($accent, 900);
          background-color: mat.get-color-from-palette($primary, 100);
        }
      }
    }

    .o-app-sidenav-sidenav {
      background: mat.get-color-from-palette($primary);


      .sidenav-toggle {
        color: mat.get-color-from-palette($primary, default-contrast);
      }

      .o-app-sidenav-item {
        color: mat.get-color-from-palette($primary, default-contrast);

        &.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: mat.get-color-from-palette($primary, 800);
            }
          }
        }
      }

      .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: mat.get-color-from-palette($primary, 900);
            }
          }
        }
      }

      li a {
        color: inherit;
      }
    }
  }
}@mixin o-bar-menu-theme($theme-or-color-config) {
    $theme: map.get($theme-or-color-config, color);
    $primary: map.get($theme, primary);


    $bg-color: #FFF;
    $fg-color: rgba(0, 0, 0, 0.7);

    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);

    .o-bar-menu {
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);

      nav {
        .fake-ul {
          .fake-ul {
            background-color: $bg-color;

            .mat-icon,
            .o-bar-menu-group-title,
            .o-bar-menu-item-title,
            label.toggle {
              color: $fg-color;
            }

            .fake-li {
              background-color: $bg-color;
            }
          }
        }

        a {
          color: $bg-color;
        }
      }

      @media all and (min-width : 768px) {
        nav .fake-ul {
          .fake-li .fake-ul .fake-li-hover {
            background: $item-bg-color-hover-dark;
          }

          .fake-li-hover {
            background-color: $item-bg-color-hover-light;
          }
        }
      }

      @media all and (max-width : 767px) {
        nav {
          a:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }

          .fake-ul {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
          }
        }

        .toggle {
          &:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }
        }
      }
    }
  }@mixin o-breadcrumb-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);

  .toolbar-breadcrumb {
    background-color: mat.get-color-from-palette($background, app-bar);

    a {
      color: mat.get-color-from-palette($primary);
    }

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

}@mixin o-card-menu-item-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $typography: map.get($theme-or-color-config, typography);
  $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);

  .o-card-menu-item {

    background: mat.get-color-from-palette($background, 'card');
    border: 1px solid mat.get-color-from-palette($primary, 0.17);

    .o-card-menu-item-main {
      background-color: mat.get-color-from-palette($background, background, 0.29);
    }

    @if($typography) {
      .o-card-menu-item-title {
        font-size: mat.font-size($typography, headline-6);
      }
    }

    .o-card-menu-item-title {
      color: mat.get-color-from-palette($primary);
    }

    .mat-mdc-button:not(:disabled) {
      color: mat.get-color-from-palette($primary);
      background: mat.get-color-from-palette($accent, 100);
    }

    .o-card-menu-item-icon,
    .o-card-menu-item-info {
      color: mat.get-color-from-palette($primary, 0.54);
    }

  }

}@mixin o-container-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);
  $typography: map.get($theme-or-color-config, typography);

  .o-column,
  .o-column-collapsible,
  .o-row,
  .o-row-collapsible {
    >.o-container {
      &.mat-expansion-panel {
        background-color: inherit;
      }

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

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

      }

      @if($typography) {
        >.o-container-title,
        >.mat-expansion-panel-header .o-container-title {
          span {
            font: {
              size: mat.font-size($typography, body-1);
              weight: mat.font-weight($typography, body-1);
            }
          }
        }
      }
    }
  }

  .o-column-collapsible,
  .o-row-collapsible {
    >.o-container {
      .o-container-title.mat-expansion-panel-header-title {
        border: none;
      }
    }
  }

  .o-column-collapsible.o-appearance-outline,
  .o-column.o-appearance-outline,
  .o-row-collapsible.o-appearance-outline,
  .o-row.o-appearance-outline {
    >.o-container {
      .o-container-title {
        color: mat.get-color-from-palette($foreground, text);
      }
    }

    .o-container-outline {

      .o-container-outline-end,
      .o-container-outline-gap,
      .o-container-outline-gap-description,
      .o-container-outline-gap-empty1,
      .o-container-outline-gap-empty2,
      .o-container-outline-gap-icon,
      .o-container-outline-gap-title,
      .o-container-outline-start {
        border-color: mat.get-color-from-palette($foreground, divider);
      }
    }
  }
}@mixin o-dual-list-selector-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $foreground: map.get($theme, foreground);
  $primary: map.get($theme, primary);
  $background: map.get($theme, background);
  $is-dark-theme: map.get($theme, is-dark);

  .o-dual-list-selector {
    .o-dual-list-selector-list {
      .mat-mdc-selection-list.mat-mdc-list-base {
        border: 1px solid mat.get-color-from-palette($foreground, divider);

        .mat-mdc-list-item {
          &:not(.mat-mdc-list-option) {
            border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
          }
        }

        .mat-mdc-list-option {
          background: mat.get-color-from-palette($background, 'hover');

          &[aria-selected="true"] {
            background-color: mat.get-color-from-palette($primary, 100);

            .mdc-list-item__secondary-text {
              color: if($is-dark-theme, #121212, mat.get-color-from-palette($foreground, text));
            }
          }
        }

        &.cdk-drop-list-dragging {
          border-style: dashed;
          border-width: 2px;
        }
      }

      .mat-mdc-mini-fab:not([class*='mat-elevation-z']) {
        box-shadow: none;

        &.mat-accent:not([disabled]) {
          background-color: mat.get-color-from-palette($foreground, divider);
          color: mat.get-color-from-palette($foreground, text);
        }
      }
    }
  }
}@mixin o-grid-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);

  .o-grid {
    .mat-toolbar {
      padding: 0 4px;
      background: transparent;
    }

    .o-grid-container {
      .o-loading-blocker .o-spinner-container {
       background-color: transparent;
      }
    }

    .mat-paginator {
      background-color: inherit;
    }
  }
}@mixin o-image-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);
  $warn: map.get($theme, warn);
  $borderColor: mat.get-color-from-palette($foreground, secondary-text);

  .o-image {
    .o-image-content {
      .o-image-display-container {
        &.o-image-drag-and-drop:not(.o-image-drag-and-drop-required) {
          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='"+$borderColor+"' stroke-width='1' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
        }

        &.o-image-drag-and-drop.o-file-dragging {
          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='"+$borderColor+"' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
          background-color: mat.get-color-from-palette($background);
        }

        &.o-image-drag-and-drop-required:not(.o-file-dragging) {
          border-color: mat.get-color-from-palette($warn);
        }

        .o-image-button-remove {
          background-color: mat.get-color-from-palette($background, background);

          &:hover {
            background-color: mat.get-color-from-palette($foreground, disabled-button);
          }
        }
      }
    }
  }
}@mixin icon-color-mixin($icon-color) {

  .icon-btn,
  .mat-icon,
  .read-only .mat-icon,
  .svg-icon {
    color: $icon-color;
  }
}

@mixin input-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $is-dark-theme: map.get($theme, is-dark);
  $foreground: map.get($theme, foreground);
  $warn: map.get($theme, warn);
  $underline-color: mat.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);

  .mat-mdc-form-field {
    &.mat-form-field-disabled.accent {
      @include icon-color-mixin(mat.get-color-from-palette($accent, 0.42));
    }

    &:not(.mat-form-field-disabled) {
      @include icon-color-mixin(mat.get-color-from-palette($foreground, icon));

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

      &.accent {
        @include icon-color-mixin(mat.get-color-from-palette($accent));
      }
    }

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

    &.mat-form-field-appearance-ontimize.read-only {

      .mat-mdc-select-disabled .mat-mdc-select-value {
        color: inherit;
      }

      mat-label {
        color: $underline-color;
      }

      .mdc-text-field {
        .mdc-line-ripple::after,
        .mdc-line-ripple::before {
          background-color: $underline-color;
        }
      }

    }

    &.mat-form-field-invalid .mat-mdc-form-field-icon-suffix .mat-icon {
      color: mat.get-color-from-palette($warn);
    }

  }

  input:not([type]):disabled,
  input[type="color"]:disabled,
  input[type="date"]:disabled,
  input[type="datetime"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="email"]:disabled,
  input[type="month"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="text"]:disabled,
  input[type="time"]:disabled,
  input[type="url"]:disabled,
  input[type="week"]:disabled,
  textarea:disabled {
    color: mat.get-color-from-palette($foreground, disabled-text);
  }

  .o-tooltip.o-mat-error {
    .mdc-tooltip__surface {
      background: mat.get-color-from-palette($primary, default-contrast);
      border: 1px solid mat.get-color-from-palette($warn);
      color: mat.get-color-from-palette($warn);
    }
  }

  /* CHECKBOX */
  .mat-mdc-checkbox:not(.mat-mdc-checkbox-disabled) {
    &.mat-accent {
      .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
        border-color: if($is-dark-theme, mat.get-color-from-palette($accent, 500), mat.get-color-from-palette($foreground, secondary-text));
      }
    }

    &.mat-primary {
      .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
        border-color: if($is-dark-theme, mat.get-color-from-palette($primary, 500), mat.get-color-from-palette($foreground, secondary-text));
      }
    }
  }
}
@mixin o-list-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $foreground: map.get($theme, foreground);
  $background: map.get($theme, background);

  .o-list-container {

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

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

    .o-list-row-action .mdc-checkbox,
    .o-list-item-icon {
      color: mat.get-color-from-palette($foreground, icon);
    }

    .spinner-container {
      &:not(.pageable-loading) {
        background-color: transparent;

      }

      &.pageable-loading {
        background-color: transparent;
      }
    }
  }
}@mixin app-global-theme($theme-or-color-config, $typography: null) {
  $theme: map.get($theme-or-color-config, color);
  $accent: map.get($theme, accent);
  $primary: map.get($theme, primary);
  $foreground: map.get($theme, foreground);
  $background: map.get($theme, background);
  $is-dark-theme: map.get($theme, is-dark);
  $background-primary-button: if($is-dark-theme, transparent, mat.get-color-from-palette($primary, 100));
  $background-hover-primary-button: if($is-dark-theme, mat.get-color-from-palette($primary, 500, 0.04), #ffffff);
  $border-color-primary-button: if($is-dark-theme, mat.get-color-from-palette($foreground, divider), transparent);
  $font-color-primary-button: if($is-dark-theme, mat.get-color-from-palette($primary, 500), mat.get-color-from-palette($primary, 800));
  $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));
  $font-color-hover-accent-button: if($is-dark-theme, mat.get-color-from-palette($accent, 500), mat.get-color-from-palette($accent, 800));
  $border-color-accent-button: if($is-dark-theme, mat.get-color-from-palette($foreground, divider), transparent);
  $scrollbar-color: if($is-dark-theme, mat.get-color-from-palette($primary, 500), mat.get-color-from-palette($primary, 200));

  @if $typography==null {
    $typography: map.get($theme-or-color-config, 'typography');

  }

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

  @if($typography) {

    button,
    html,
    input,
    select,
    span,
    textarea {
      font-family: mat.font-family($typography);
    }
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
    opacity: 1.0;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0;
    background-color: #c7c7c7;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0;
    -webkit-box-shadow: none;
    background-color: $scrollbar-color;
    opacity: 1.0;
  }

  .o-loading {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 999;

    div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      aspect-ratio: 1;
      height: calc(100% - 12px);
      margin: 6px;
      border: 3px solid;
      border-radius: 50%;
      left: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: mat.get-color-from-palette($primary) transparent transparent transparent;
    }

    div:nth-child(1) {
      animation-delay: -0.45s;
    }

    div:nth-child(2) {
      animation-delay: -0.3s;
    }

    div:nth-child(3) {
      animation-delay: -0.15s;
    }

  }

  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* MODAL DIALOG IN O-DIALOG, FORM LAYOUT MANAGER AND LIST-PICKER */

  .o-dialog-class,
  .o-form-layout-dialog-overlay,
  .o-list-picker-dialog {
    .mat-mdc-dialog-container {
      .mat-mdc-dialog-title {
        border-bottom: 1px solid mat.get-color-from-palette($primary);

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

      @if($typography) {
        .mat-mdc-dialog-title {
          line-height: mat.font-size($typography, subtitle-1);
          font-size: mat.font-size($typography, subtitle-1);
        }
      }


      .empty-filter-list {
        color: mat.get-color-from-palette($foreground, disabled-text);
      }

      .mat-mdc-dialog-content {
        @if($typography) {
          font-size: mat.font-size($typography, body-1);
        }

        .mat-mdc-subheader.mdc-list-group__subheader {
          font-weight: inherit;
          font-size: inherit;
          margin: 0;

        }


        .mdc-list {
          padding: 0;
          @include mat.list-density(-2);

          .mat-mdc-list-item.mdc-list-item {
            margin: 6px 0;
            border-radius: 4px;

            &.mdc-list-item--with-leading-checkbox .mdc-list-item__start {
              margin-right: 8px;
            }

            &.mdc-list-item--with-one-line,
            &.mdc-list-item--with-two-lines,
            &.mdc-list-item--with-three-lines {
              height: auto;
              min-height: 30px;

            }

            .mdc-list-item__content {
              display: table;
              align-self: center;
              width: 100%;


              .mdc-list-item__secondary-text,
              .mdc-list-item__primary-text {
                margin-bottom: 0;
                align-self: center;
                vertical-align: middle;

                &::before,
                &::after {
                  content: none;
                }

                &.mat-mdc-list-item-unscoped-content {
                  display: table-cell;
                  vertical-align: middle;
                  width: 100%;
                }
              }
            }

            .mdc-list-item__start {
              align-self: center;
              margin-top: 0;
            }

          }
        }

      }
    }
  }



  /*global styles about drag/drop in dialogs table*/
  .cdk-drag-preview,
  .cdk-drag-dragging {

    &.mdc-list-item.mat-mdc-list-item {

      background-color: mat.get-color-from-palette($background, background);
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
      box-sizing: border-box;
      border-radius: 2px;

      .mdc-list-item__secondary-text,
      .mdc-list-item__primary-text {
        padding: 0 8px;
        width: 100%;

        &::before,
        &::after {
          content: none;
        }
      }

      .mdc-list-item__start {
        align-self: center;
        margin-top: 0;
        margin-right: 8px;
      }

      .mdc-list-item__secondary-text {
        color: mat.get-color-from-palette($foreground, icon);

        @if($typography) {
          font-size: mat.font-size($typography, body-1);
        }
      }
    }

  }

  .cdk-drop-list-dragging .o-drag-list-item-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  }


  o-data-toolbar {

    &.o-grid-toolbar button.o-grid-button,
    &.o-list-toolbar button.o-list-button,
    &.o-table-toolbar .buttons .o-table-button,
    &.o-table-toolbar .buttons button {
      margin: 0 4px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .mat-mdc-dialog-actions,
  .o-form .o-form-toolbar {
    button {
      margin: 0 8px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  /*BUTTONS HOVER*/
  .mat-mdc-dialog-actions button:not([disabled]),
  .o-form .o-form-toolbar button:not([disabled]).o-form-toolbar-button,
  .o-grid .o-grid-toolbar button.o-grid-button:not([disabled]),
  .o-list .o-list-toolbar button.o-list-button:not([disabled]),
  .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons .o-table-button button:not([disabled]) {

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

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

    }

    &.mat-mdc-button-base,
    &.mat-mdc-button-base.mat-accent {
      color: mat.get-color-from-palette($accent);
      background-color: $background-accent-button;

      &:hover {
        color: mat.get-color-from-palette($primary, 800);
        background-color: mat.get-color-from-palette($primary, 100);
        border-color: transparent;
      }
    }

  }

  .o-form .o-form-toolbar [o-form-toolbar-buttons]>* {

    margin: 0 8px;

    &:first-child {
      margin-left: 0;
    }

  }

  .o-button button.mat-mdc-outlined-button {
    &:not([disabled]) {
      &.mat-primary {
        color: $font-color-primary-button;
        background-color: $background-primary-button;
        border-color: $border-color-primary-button;

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

      }

      &.mat-accent {
        color: mat.get-color-from-palette($accent, 500);
        background-color: $background-accent-button;

        &:hover {
          color: $font-color-hover-accent-button;
          background-color: $background-hover-accent-button;
        }
      }

    }

  }

  .o-form .o-form-toolbar button,
  .ontimize-table.o-table .o-table-container .o-table-toolbar .buttons .o-table-button button {
    &.mat-mdc-outlined-button {
      padding: 0 6px;

      .mat-mdc-button-wrapper {
        .mat-icon {
          margin-right: 4px;
          font-size: 20px;
          width: 20px;
          height: 20px;
          line-height: 20px;

        }

        span {
          flex: 1;
        }
      }
    }
  }

  /*MAT PAGINATION*/
  .mat-mdc-paginator {
    .mat-mdc-paginator-range-label {
      margin: 0 16px;
    }

    .mat-mdc-paginator-page-size-label {
      margin-right: 16px;
    }

    button {
      &:hover {
        background-color: mat.get-color-from-palette($primary, 100);
        border-radius: 50%;
      }

      &.mat-mdc-icon-button {
        height: 20px;
        width: 20px;
        line-height: 20px;
        margin-left: 8px;

        .mat-mdc-paginator-icon {
          width: 20px;
        }

        .mat-mdc-button-touch-target {
          height: 20px;
          width: 20px;
        }
      }
    }

  }
}// Layout-padding-xxx & Layout-margin-xxxx
// ------------------------------
$baseline-grid: 8px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;
$layout-gutter-width-vertical: $baseline-grid;
$layout-gutter-width-horizontal: 14px !default;
@mixin o-layout-padding-margin() {
  [layout-padding-vertical] {
    padding: $layout-gutter-width-vertical 0;
  }

  [layout-margin-vertical] {
    margin: $layout-gutter-width-vertical 0;
  }

  [layout-padding-horizontal] {
    padding: 0 $layout-gutter-width-horizontal;
  }

  [layout-margin-horizontal] {
    margin: 0 $layout-gutter-width-horizontal;
  }

  [layout-padding-left] {
    padding-left: $layout-gutter-width-horizontal;
  }

  [layout-margin-left] {
    margin-left: $layout-gutter-width-horizontal;
  }

  [layout-padding-right] {
    padding-right: $layout-gutter-width-horizontal;
  }

  [layout-margin-right] {
    margin-right: $layout-gutter-width-horizontal;
  }

  [layout-padding-top] {
    padding-top: $layout-gutter-width-vertical;
  }

  [layout-margin-top] {
    margin-top: $layout-gutter-width-vertical;
  }

  [layout-padding-bottom] {
    padding-bottom: $layout-gutter-width-vertical;
  }

  [layout-margin-bottom] {
    margin-bottom: $layout-gutter-width-vertical;
  }

}
@mixin o-form-toolbar-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $primary: map.get($theme, primary);
  $background: map.get($theme, background);

  .o-form-toolbar-header {
    background-color: mat.get-color-from-palette($background, app-bar);
  }
}@mixin o-date-input-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);

  $color-inactive: #999999;
}@mixin o-daterange-input-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);
  $is-dark-theme: map-get($theme, is-dark);
  $color-inactive: #999999;

  /*
  *  variables
  */

  // Select
  $select-border: 1px solid #f2f2f2 !default;
  $select-background: rgba(255, 255, 255, 0.90) !default;
  $select-padding: 5px !default;
  $select-radius: 2px !default;
  $input-height: 3rem !default;

  /*
* styles
*/
  .md-drppicker {
    .calendar {

      td,
      th {
        color: mat.get-color-from-palette($foreground, text);

        &.in-range {
          color: if($is-dark-theme, #000000, #fff);
        }

        &.available {
          &.prev {
            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgPGc+DQogICAgPHBhdGggZD0iTTMuNywwLjdMMS40LDNsMi4zLDIuM0wzLDZMMCwzbDMtM0wzLjcsMC43eiIgZmlsbD0iI0ZGRkZGRiIvPg0KICA8L2c+DQo8L3N2Zz4="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
          }

          &.next {
            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiIGZpbGw9IiNGRkZGRkYiIC8+DQo8L2c+DQo8L3N2Zz4NCg=="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
          }
        }
      }
    }

    background-color: mat.get-color-from-palette($background, card);

    &:after,
    &:before {
      border-bottom-color: mat.get-color-from-palette($foreground, divider);
    }

    .calendar-table {
      border-color: mat.get-color-from-palette($foreground, divider);
    }

    th {
      font-weight: normal;
    }

    td,
    th {
      text-align: center;

      border-color: mat.get-color-from-palette($foreground, divider);

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

      &.week {
        font-size: 80%;
        color: #ccc;
      }
    }

    td {
      &.off {

        &,
        &.end-date,
        &.in-range,
        &.start-date {
          background-color: mat.get-color-from-palette($background, background);
          border-color: transparent;
          color: $color-inactive;
        }
      }

      //
      // Date Range
      &.in-range {
        background-color: mat.get-color-from-palette($primary, A200);
        border-color: transparent;
      }

      &.active {
        background-color: mat.get-color-from-palette($primary);
        color: mat.get-color-from-palette($primary, default-contrast);

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

        }
      }
    }

    // disabled controls
    option,
    td {
      &.disabled {
        color: #999;

      }
    }

    .dropdowns {
      select {

        background-color: $select-background;

        &.ampmselect,
        &.hourselect,
        &.minuteselect,
        &.secondselect {
          width: 50px;
          margin: 0 auto;
          background: #eee;
          border: 1px solid #eee;
          padding: 2px;
          outline: 0;
          font-size: 12px;
        }

      }
    }

    .calendar-time {
      .select {
        .select-item {

          background-color: transparent;

          border-bottom: 1px solid rgba(0, 0, 0, 0.12);

          /* Remove focus */
          &:after {

            border-top: 6px solid rgba(0, 0, 0, 0.12);

          }

          .select-label {
            color: rgba(0, 0, 0, 0.26);

          }
        }
      }
    }

    .calendar-time select.disabled {
      color: $color-inactive;
    }



    /* ranges */
    .show-ranges {
      .drp-calendar.left {
        border-left: 1px solid #ddd;
      }
    }

    .ranges {
      ul {
        li {
          button {
            &.active {
              background: mat.get-color-from-palette($background, hover, 0.12);
            }
          }
        }

        li:hover {
          background: mat.get-color-from-palette($background, hover, 0.12);

        }
      }
    }

  }

}
@mixin o-hour-input-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $primary: map.get($theme, primary);
  $background: map.get($theme, background);
  $is-dark-theme: map.get($theme, is-dark);

  ngx-material-timepicker-container ngx-material-timepicker-content {
    .timepicker__header {
      background-color: mat.get-color-from-palette($primary) !important;
    }

    .clock-face {
      background-color: mat.get-color-from-palette($background, level-1);

      .clock-face__container {
        .clock-face__number>span.active {
          background-color: mat.get-color-from-palette($primary);
        }
      }

      .clock-face__clock-hand {
        background-color: mat.get-color-from-palette($primary);
      }

      .clock-face__clock-hand:after {
        background-color: mat.get-color-from-palette($primary);
      }

      .clock-face__clock-hand_minute:before {
        border: 4px solid mat.get-color-from-palette($primary);
      }
    }

    .timepicker-button {
      color: mat.get-color-from-palette($primary);
    }

    .timepicker__actions {
      background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), mat.get-color-from-palette($background, level-1)) !important;
    }

    .timepicker__body {
      background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), mat.get-color-from-palette($background, level-1)) !important;
    }

    .timepicker-dial__control {
      outline: none;
    }
  }
}@mixin o-list-picker-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $primary: map.get($theme, primary);

  .o-list-picker-dialog mat-toolbar .o-list-picker-search {

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

  }
}@mixin o-table-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $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);
  $table-background: mat.get-color-from-palette($background, 'card');
  $text-color: mat.get-color-from-palette($foreground, secondary-text);
  $text-opacity: opacity($text-color);
  $is-dark-theme: map.get($theme, is-dark);

  .o-table {
    .o-table-column-resizer span {
      background: mat.get-color-from-palette($foreground, secondary-text, 0.24);
    }

    .spinner-container {
      background-color: transparent;
    }

    .o-table-menu-button {
      color: mat.get-color-from-palette($foreground, secondary-text);
    }

    .mat-mdc-table {
      .mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background {
        border-color: mat.get-color-from-palette($foreground, secondary-text, 0.18);
      }

      .mat-mdc-header-row {
        .mat-mdc-header-cell {
          color: mat.get-color-from-palette($foreground, text);

          .column-filter-icon {
            color: mat.get-color-from-palette($background, disabled-button);
          }

          .column-filter-icon-active {
            color: mat.get-color-from-palette($primary);
          }

          .o-table-header-indicator-numbered {
            color: mat.get-color-from-palette($foreground, secondary-text);
          }
        }
      }

      .mat-mdc-row {
        &.o-table-group-row-level-1 {
          font-weight: 900;
          background-color: if($is-dark-theme, #464646, #b2b2b2);
        }

        &.o-table-group-row-level-2 {
          font-weight: 800;
          background-color: if($is-dark-theme, #575757, #cccccc);
        }

        &.o-table-group-row-level-3 {
          font-weight: 700;
          background-color: if($is-dark-theme, #686868, #e8e8e8);
        }

        &.o-table-group-row-level-4 {
          font-weight: 600;
          background-color: if($is-dark-theme, #7a7a7a, #f9f9f9);
        }

        &:hover:not(.o-table-group-row) {
          cursor: pointer;
          background-color: mat.get-color-from-palette($foreground, base, 0.18);
        }

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

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

      }

      .mat-mdc-footer-row.o-table-aggregate {
        font-weight: bold;
        background-color: mat.get-color-from-palette($background, status-bar);
      }

      .mat-mdc-footer-row,
      .mat-mdc-row {

        .mat-mdc-cell,
        .mat-mdc-footer-cell {

          &.o-column-currency,
          &.o-column-integer,
          &.o-column-real {
            text-align: right;
          }

          &.o-column-action,
          &.o-column-boolean,
          &.o-column-date {
            text-align: center;
          }
        }
      }

      &.editable-row-table .mat-mdc-row,
      &.totals-table .mat-mdc-row {
        background-color: mat.get-color-from-palette($background, status-bar, 0.9);
      }

      &.totals-table {
        .mat-mdc-header-row {
          display: none !important;
        }

        .mat-mdc-row {
          font-weight: bold;
        }
      }
    }

    .o-table-body.horizontal-scroll {
      &::-webkit-scrollbar-thumb {
        background-color: mat.get-color-from-palette($primary, 200, 0.5);
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: mat.get-color-from-palette($primary, 200);
      }

      &::-webkit-scrollbar-thumb {
        border: 6px solid;
        border-color: mat.get-color-from-palette($background, background);
      }

      &::-webkit-scrollbar-thumb:hover {
        border: 4px solid;
        border-color: mat.get-color-from-palette($background, background);
      }
    }

  }

  .o-table-visible-columns-dialog {
    .mat-mdc-list-item.dnd-sortable-drag {
      background: mat.get-color-from-palette($primary, 50);
    }
  }


  .o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-prefix div {
    border-right: 1px solid mat.get-color-from-palette($foreground, divider);
  }
}
@mixin o-dialog-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);
  $foreground: map.get($theme, foreground);
  $info: mat.define-palette(mat.$light-blue-palette);
  $warn: mat.define-palette(mat.$amber-palette);
  $error: mat.define-palette(mat.$red-palette);

  .alert-icon {
    &.info {
      color: mat.get-color-from-palette($info);
    }

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

    &.error {
      color: mat.get-color-from-palette($error);
    }
  }

  .mat-mdc-dialog {
    background-color: mat.get-color-from-palette($background, dialog);

    &.mat-content-overflow {

      .mat-actions,
      mat-dialog-actions {
        border-top-color: mat.get-color-from-palette($foreground, divider);
      }
    }
  }
}// Create a theme.
@mixin o-app-layout-theme($theme) {


}
@mixin o-form-layout-split-pane-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);

  .o-form-layout-split-pane {

    .spinner-container,
    .o-split-pane-secondary-content {
      background-color: mat.get-color-from-palette($background, background);
    }
  }
}@mixin o-form-layout-tabgroup-theme($theme-or-color-config) {
  $theme: map.get($theme-or-color-config, color);
  $background: map.get($theme, background);
  $primary: map.get($theme, primary);
  $foreground: map.get($theme, foreground);

  .o-form-layout-tabgroup {
    >.spinner-container {
      background-color: mat.get-color-from-palette($background, background);
    }

    .mat-mdc-tab-group.o-tab-ontimize>.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab.mdc-tab {

      .mat-icon:hover {
        background-color: mat.get-color-from-palette($foreground, disabled-button);
        border-radius: 50%;
      }


      &.mdc-tab--active {
        .mat-icon:hover {
          background-color: mat.get-color-from-palette($primary, 500, 0.4);
        }
        .mdc-tab__text-label {
          color: mat.get-color-from-palette($foreground, text);
        }

      }
    }

  }
}