prenix_components

@layer components {
  .ripple {
    @apply absolute bg-ripple rounded-[50%] w-[5px] h-[5px] opacity-0;
    animation: ripple-effect 0.88s 1;
  }

  @keyframes ripple-effect {
    0% {
      transform: scale(1);
      opacity: 0.4;
    }
    100% {
      transform: scale(100);
      opacity: 0;
    }
  }

  .tap-highlight-transparent {
    -webkit-tap-highlight-color: transparent;
  }

  .transition-transform-colors-opacity {
    transition-property: transform, color, background, background-color,
      border-color, text-decoration-color, fill, stroke, opacity;
    transition-timing-function: ease;
    transition-duration: 0.25s;
  }

  .transition-colors-opacity {
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke, opacity;
    transition-timing-function: ease;
    transition-duration: 0.25s;
  }

  .transition-width {
    content: '';
    transition-property: width;
    transition-timing-function: ease;
    transition-duration: 0.25s;
  }

  .transition-transform-opacity {
    content: '';
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.25s;
  }

  .transition-opacity-margin {
    transition-property: margin, opacity;
  }

  .transition-transform-background {
    transition-property: transform, background;
    transition-timing-function: ease;
    transition-duration: 0.25s;
  }

  .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
  }

  .visually-hidden {
    clip-path: inset(50%);
    clip: rect(0, 0, 0, 0);
    @apply absolute w-[1px] h-[1px] p-0 -m-[1px];
    @apply overflow-hidden whitespace-nowrap border-0;
  }
}