@import '../../../theme/theme-default.less';
@onboarding-prefix: ~'.onboarding';

@{onboarding-prefix} {
  + .cdk-overlay-container {
    z-index: @onboarding-zindex;
  }
  &__mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @onboarding-zindex - 1;
    background-color: @onboarding-mask-background-color;
    opacity: @onboarding-mask-opacity;
  }
  &__item {
    position: absolute;
  }
  &__light {
    position: absolute;
    z-index: @onboarding-zindex;
    background-color: @onboarding-light-background-color;
    animation: @onboarding-light-ant;
    pointer-events: none;

    &-el {
      // position: relative;
      z-index: @onboarding-zindex + 1 !important;
    }

    &-ant {
      transition: @onboarding-changing-ant;
    }
  }
  &__footer {
    margin-top: 8px;
  }
  &__total {
    color: @text-color;
  }

  @keyframes onboardingAnt {
    0%,
    33% {
      box-shadow: color(@onboarding-light-ant-color) 0 0 0 2px, @onboarding-light-ant-color 0 0 0;
    }
    66%,
    100% {
      box-shadow: @onboarding-light-ant-color 0 0 0 2px, fade(@onboarding-light-ant-color, 1%) 0 0 0 10px;
    }
  }
}