@use '@angular/material' as mat;
@mixin guide-directive-mat($theme) {
  $color-config: mat-get-color-config($theme);
  $primary-color: mat.get-color-from-palette(map-get($color-config, primary));

  #guide-highlight {
    position: fixed;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    z-index: 10002; // need be higher than mat-menu
    animation-name: pulseShadow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  #guide-disable-field {
    position: fixed;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    border: 3000px solid rgba(0, 0, 0, 0.3);
    z-index: 10000; // need be higher than mat-menu
  }

  #guide-desc {
    background-color: $primary-color;
    border: map-get(map-get(map-get($color-config, primary), contrast), 900);
    color: map-get(map-get(map-get($color-config, primary), contrast), 900);
    padding: 6px;
    position: fixed;
    width: 200px;
    z-index: 10001; // need to be higher than the mat-menu
    font-size: 16px;

    p{
        margin:4px;
        padding:0;
    }
  }

  #guide-skip{
    text-align: right;
    font-size: 12px;
    font-style: italic;
    display: block;

    span{
        cursor: pointer;
        display: block;
    }
  }

  @keyframes pulseShadow {
    0% {
      box-shadow: 0px 0px 5px 5px mat.get-color-from-palette($primary);
    }
    50% {
      box-shadow: 0px 0px 10px 20px mat.get-color-from-palette($primary);
    }
    100% {
      box-shadow: 0px 0px 5px 5px mat.get-color-from-palette($primary);
    }
  }
}
