@tailwind components;
@tailwind utilities;

@layer components {
  .nav-link:hover span,
  .nav-link.active span {
    @apply border-primary;
  }
  .scrollable-horizontal {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .scrollable-horizontal > * {
    flex-shrink: 0;
    flex-grow: 0;
  }
  .scrollable-horizontal::-webkit-scrollbar {
    display: none;
  }
  .gradient:before {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #171717;
    background-image: radial-gradient(at 65% 75%, #171717 0, transparent 100%),
      radial-gradient(at 65% 42%, hsla(47, 100%, 50%, 0.7) 0, transparent 50%),
      radial-gradient(at 30% 35%, hsla(355, 90%, 60%, 0.7) 0, transparent 35%),
      radial-gradient(at 34% 57%, hsla(295, 100%, 50%, 0.7) 0, transparent 50%),
      radial-gradient(at 76% 53%, hsla(261, 100%, 50%, 0.7) 0, transparent 64%);
  }
}