body.tour-open {
    overflow: hidden;
}

@mixin guided-tour($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $bg-color: mat-color(map-get($theme, background), card) !default;
  $fg-color: mat-color(map-get($theme, foreground), text) !default;
  $tour-zindex: 1081 !default;
  $tour-orb-color: mat-color($primary) !default;
  $tour-shadow-color: rgba(mat-color($primary), 0.75);

  lcu-guided-tour {
    .guided-tour-user-input-mask {
      z-index: $tour-zindex;
    }

    .guided-tour-spotlight-overlay {
      z-index: $tour-zindex + 1;
    }

    .tour-orb {
      z-index: $tour-zindex - 2;
      background-color: $tour-orb-color;
      box-shadow: 0 0 0.3rem 0.1rem $tour-orb-color;

      .tour-orb-ring {
        &::after {
          border: 1rem solid $tour-orb-color;
          box-shadow: 0 0 0.1rem 0.1rem $tour-orb-color;
        }
      }
    }

    .tour-step {
      z-index: $tour-zindex + 2;

      &.tour-bottom, &.tour-bottom-right, &.tour-bottom-left {
        .tour-arrow::before {
          @include tour-triangle(top, $bg-color, $tour-shadow-color);
        }
      }

      &.tour-top, &.tour-top-right, &.tour-top-left {
        .tour-arrow::before {
          @include tour-triangle(bottom, $bg-color, $tour-shadow-color);
        }
      }

      &.tour-left {
        .tour-arrow::before {
          @include tour-triangle(right, $bg-color, $tour-shadow-color);
        }
      }

      &.tour-right {
        .tour-arrow::before {
          @include tour-triangle(left, $bg-color, $tour-shadow-color);
        }
      }

      &.step-error {
        .tour-block {
          .mat-card-title, .tour-content b {
            color: mat-color($warn) !important;
          }

          .tour-content a {
            color: mat-color($primary) !important;
          }

          .tour-logo {
            box-shadow: 0 0 10px 2px mat-color($warn), inset 0px 0px 20px 10px rgba(0, 0, 0, 0.25) !important;
          }

          &.card-shadow {
            box-shadow: 0 0 7px 1px rgba(mat-color($warn), 0.75) !important;
          }

        }
      }

      .tour-block {
        padding: 15px;

        &.card-shadow {
          box-shadow: 0 0 7px 1px rgba(mat-color($primary), 0.75);
        }

        .tour-content {
          margin-top: 5px;
          min-height: 30px;

          b {
            color: mat-color($primary);
          }
        }

        .tour-logo {
          height: 95px;
          width: 95px;
          margin: -10px 0px 0px -10px;
          background: rgba(0, 0, 0, 0.15);
          box-shadow: inset 0px 0px 20px 10px rgba(0, 0, 0, 0.25);

          .mat-spinner {
            margin-left: -5px;
            margin-top: -5px;
          }

          // glow
          // box-shadow: 0 0 10px 1px mat-color($primary);
        }

        .mat-card-header-text {
          margin: 0;
        }

        .custom-header {
          display: flex;
          flex-direction: column;
          margin-left: 10px;

          .mat-card-subtitle {
            margin-bottom: 0;
          }

          .tour-progress {
            display: flex;
            margin-bottom: 15px;
            justify-content: flex-start;
            position: relative;

            span {
              background: rgba(mat-color($primary), 0.1);
              box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
              border-radius: 50%;
              border: 1px solid rgba(255, 255, 255, 0.12);
              height: 10px;
              margin-right: 13px;
              transition: 1s;
              width: 10px;

              &.filled {
                background: mat-color($primary);
                box-shadow: none;
                transition: 1s;

                &:after {
                  content: ' ';
                  background: mat-color($primary);
                  height: 2px;
                }
              }

              &.error-filled {
                background: mat-color($warn) !important;
              }

              &:after {
                content: ' ';
                background: rgba($fg-color, 0.12);
                width: 10px;
                height: 1px;
                position: absolute;
                margin-left: 12px;
                top: 5px;
              }

              &:last-child:after {
                content: none;
              }
            }
          }
        }
      }
    }
  }
}

@mixin tour-triangle($direction, $color: currentColor, $shadow-color: transparent, $size: 1rem) {

    @if not index(top right bottom left, $direction) {
        @error 'Direction must be either `top`, `right`, `bottom` or `left`.';
    }

    $opposite-direction: top;
    $shadow-filter: drop-shadow(0px -2px 2px rgba($shadow-color, 0.75));

    @if $direction==top {
        $opposite-direction: bottom;
        $shadow-filter: drop-shadow(0px -2px 2px rgba($shadow-color, 0.75));
    }

    @if $direction==bottom {
        $opposite-direction: top;
        $shadow-filter: drop-shadow(0px 2px 2px rgba($shadow-color, 0.75));
    }

    @if $direction==right {
        $opposite-direction: left;
        $shadow-filter: drop-shadow(2px 0px 2px rgba($shadow-color, 0.75));
    }

    @if $direction==left {
        $opposite-direction: right;
        $shadow-filter: drop-shadow(-2px 0px 2px rgba($shadow-color, 0.75));
    }

    width: 0;
    height: 0;
    content: '';
    filter: $shadow-filter;
    z-index: 2;
    border-#{$opposite-direction}: $size solid $color;
    $perpendicular-borders: $size solid transparent;
    @if $direction==top or $direction==bottom {
        border-left: $perpendicular-borders;
        border-right: $perpendicular-borders;
    }
    @else if $direction==right or $direction==left {
        border-bottom: $perpendicular-borders;
        border-top: $perpendicular-borders;
    }
}