@include b(mask) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--#{$rd-prefix}mask-background-color);
}

@include b(wave) {
  @keyframes wave-wave {
    0% {
      box-shadow: 0 0 0 0 var(--#{$rd-prefix}wave-color);
    }

    100% {
      box-shadow: 0 0 0 6px var(--#{$rd-prefix}wave-color);
    }
  }
  @keyframes wave-fade-out {
    0% {
      opacity: 0.2;
    }

    100% {
      opacity: 0;
    }
  }

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: wave-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1), wave-fade-out 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: both;
}

@include b(focus-outline) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border: 1px dashed var(--#{$rd-prefix}color-primary-lighter);
}
