@import '~@maggioli-design-system/styles/dist/tailwind/components.css';

@layer components {
  .svg {
    @apply flex;
  }

  .svg svg {
    @apply
      aspect-square
      h-full
      w-full;
  }

  .contrast-area-base {
    border-radius: inherit;
    box-shadow: theme('boxShadow.outline-50') inset;
    display: none;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition-behavior: allow-discrete;
    transition-property: display, opacity;
  }

  .contrast-area-50 {
    @apply contrast-area-base;

    box-shadow: theme('boxShadow.outline-50') inset;
  }

  .contrast-area {
    @apply contrast-area-base;

    box-shadow: theme('boxShadow.outline') inset;
  }

  .not-hydrated {
      animation-duration: 0s;
      border-color: transparent;
      box-shadow: 0 0 0 transparent;
      opacity: 0;
      outline-color: transparent;
      transition-delay: 0s;
      transition-duration: 0s;
      visibility: hidden;
  }
}

@tailwind components;