@forward './mixins';
@use '../../../internals/Box/styles/index' as box;
@use '../../../styles/mixins/color-modes' as color-modes;
@use 'sass:meta';

.rs-ripple {
  position: absolute;
  display: block;
  border-radius: var(--rs-radius-full);
  background-color: var(--rs-ripple-bg);
  transform: scale(0);
  transition: 0s;

  &-rippling {
    transition:
      transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    opacity: 0;
  }

  &-pond {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    pointer-events: none;

    @if meta.variable-exists(enable-ripple-effect) and $enable-ripple-effect == false {
      display: none !important;
    }

    @at-root .high-contrast-mode & {
      display: none !important;
    }
  }
}