/* global styles */

@layer base {
  [x-cloak=""] {
    display: none !important;
  }
  /* alpine cloak for small screens only */
  [x-cloak="sm"] {
    @media (width <= 768px) {
      display: none !important;
    }
  }

  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
    &.dark {
      scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
    }
  }

  mark {
    @apply bg-transparent font-bold text-blue-light dark:text-blue-dark;
  }

  /* Hide the clear (X) button for search inputs */
  /* Chrome, Safari, Edge, and Opera */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Firefox */
  input[type="search"]::-moz-search-cancel-button {
    display: none;
  }
  
  /* Internet Explorer and Edge (legacy) */
  input[type="search"]::-ms-clear {
    display: none;
  }
}

/* utility classes */

@layer utilities {
  .link {
    @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
  }

  .invertible {
    @apply dark:hue-rotate-180 dark:invert dark:filter;
  }

  .bg-pattern-blue {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-blue.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }

  .bg-pattern-purple {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-purple.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }

  .bg-pattern-verde {
    background-color: theme(colors.white / 50%);
    background-image: url('/assets/images/bg-pattern-verde.webp');
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: none;
    .dark & {
      background-color: theme(colors.black / 70%);
    }
  }
}