/* global styles */

@layer base {
  [x-cloak] {
    display: none !important;
  }

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

/* utility classes */

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

  .external-link {
    .icon-svg svg {
      @apply text-base ml-1 align-top;
    }
  }

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

  .sidebar-hover {
    @apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
  }

  .sidebar-underline {
    @apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
  }

  .bg-pattern-blue-light {
    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-blue.webp');
    @apply bg-no-repeat bg-cover;
  }

  .bg-pattern-purple-light {
    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-purple.webp');
    @apply bg-no-repeat bg-cover;
  }

  .bg-pattern-verde-light {
    background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-verde.webp');
    @apply bg-no-repeat bg-cover;
  }

  .bg-pattern-blue-dark {
    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-blue.webp');
    @apply bg-no-repeat bg-cover;
  }

  .bg-pattern-purple-dark {
    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-purple.webp');
    @apply bg-no-repeat bg-cover;
  }

  .bg-pattern-verde-dark {
    background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-verde.webp');
    @apply bg-no-repeat bg-cover;
  }
}