@use "@angular/material" as mat;
@import "@angular/material/theming";

@mixin lib-theme($config-or-theme, $palette-green, $palette-blue) {
  $config: mat-get-color-config($config-or-theme);

  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $color-text: green;

  .error {
    color: mat.get-color-from-palette($warn, 200) !important;
  }

  .bg-error {
    background-color: mat.get-color-from-palette($warn, 200) !important;
    color: white !important;
  }

  .success {
    color: mat.get-color-from-palette($palette-green, 200) !important;
  }

  .bg-success {
    background-color: mat.get-color-from-palette(
      $palette-green,
      200
    ) !important;
    color: white !important;
  }

  .info {
    color: mat.get-color-from-palette($palette-blue, 200) !important;
  }

  .bg-info {
    background-color: mat.get-color-from-palette($palette-blue, 200) !important;
    color: white !important;
  }

  /** les puces restent à côté du texte */
  ul,
  ol {
    list-style-position: inside;
  }

  .mat-typography {
    :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
    }
  }

  .mat-snack-bar-container {
    margin-bottom: 20px !important;

    &.succesToast {
      background-color: mat.get-color-from-palette($palette-green, 200);
      color: #ffffff;
    }

    &.errorToast {
      background-color: mat.get-color-from-palette($warn, 200);
      color: #ffffff;
      .mat-simple-snackbar {
        > span {
          width: 70%;
          word-wrap: break-word;
        }
      }
    }

    &.infoToast {
      background-color: mat.get-color-from-palette($palette-blue, 200);
      color: #ffffff;
    }

    .mat-simple-snackbar-action {
      .mat-button-focus-overlay {
        opacity: 0.1;
      }

      .mat-button:hover .mat-button-focus-overlay,
      .mat-stroked-button:hover .mat-button-focus-overlay {
        opacity: 0.2;
      }
    }
  }

  .mat-error {
    font-size: 12px;
    letter-spacing: normal;
  }

  @keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    border-top-color: #000000;
    animation: spinner 0.8s linear infinite;
  }

  .mat-form-compact {
    .mat-form-field-flex > .mat-form-field-infix {
      padding: 0.4em 0px !important;
    }

    .mat-form-field-label-wrapper {
      top: -1.5em;
    }

    .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
      .mat-form-field-label {
      transform: translateY(-1.1em) scale(0.75);
      width: 133.33333%;
    }
  }

  [matPrefix] {
    .mat-icon-button {
      top: 5px;
    }
  }

  [matSuffix] {
    .mat-icon-button {
      font-size: 10px !important;
    }
  }

  /** loading animation - waiting data for coming in list (ex datagrid) */
  @keyframes placeHolderShimmer {
    0% {
      background: #ececec;
    }

    30% {
      background: #f7f7f7;
    }

    50% {
      background: #ececec;
    }

    80% {
      background: #f7f7f7;
    }

    100% {
      background: #ececec;
    }
  }

  .loading-animation {
    animation: placeHolderShimmer 3s infinite;
  }

  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    &.dark-backdrop {
      background: #000;
      opacity: 0.85 !important;
    }
  }

  /** Bottom Sheet Container */
  .bottom-sheet-container {
    padding: 0 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    @media screen and (max-width: 600px) {
      & {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    .bottom-sheet-header {
      display: flex;
      background-color: #505050;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 20px;
      color: white;
      padding: 18px 10px;
      font-weight: 100;
      line-height: 25px;

      .actions-header-modal {
        margin-top: -7px;
      }

      .header-part-right {
        flex: 1;
        padding: 0 10px;
      }

      @media screen and (max-width: 600px) {
        & {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }
    }

    .bottom-sheet-list {
      padding: 8px 16px;
    }
  }

  /** / Bottom Sheet Container */

  /** Color picker */

  .custom_colors_preview {
    height: 30px !important;
    width: 30px !important;
    box-sizing: border-box;
    border-radius: 100% !important;
    border: 1px solid #dadada !important;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 14%);
  }

  /** / Color picker */

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

  /** Slide Toggle */

  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: mat.get-color-from-palette($palette-green, 200);
  }

  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: white;
  }

  /** / Slide Toggle */
}