@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  img {
    @apply inline-block;
  }
};

@layer utilities {
  .scrollbar-none {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    /* Chrome, Safari and Opera */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .links-underline a {
    // FIXME: make this reusable
    color: #F24A0D !important; // Orange 700
    text-decoration: underline !important;
  }

  .animate-content-open {
    animation: openContent 0.8s ease-in-out;
  }
};

@layer components {
  @keyframes levitation {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translate(15px, 20px);
    }
    50% {
      transform: translate(5px, 10px);
    }
    70% {
      transform: translate(15px, 20px);
    }
    100% {
      transform: translate(0);
    }
  }
  @for $i from 1 through 12 {
    @keyframes levitation-#{$i} {
      0% {
        transform: translate(0);
      }

      #{20% - $i} {
        transform: translate($i * 20px, $i * 20px) scale(calc(0.87 - $i / 100));
      }
      50% {
        transform: translate($i * 1px, $i * 2px);
      }
      #{70% - $i} {
        transform: translate($i * 25px, $i * 25px) scale(calc(0.92 - $i / 100));
      }
      100% {
        transform: translate(0);
      }
    }
  }

  @keyframes ticker {
    100% {
      transform: translateX(var(--translate-value));
    }
  }


  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .infinite-scroll {
    animation: scroll 30s linear infinite;
  }

  .bubble-1 {
    animation: levitation-2 35s infinite;
  }

  .bubble-2 {
    animation: levitation-1 35s infinite;
  }

  @keyframes openContent {
    from {
      max-height: 1px;
      padding: 0 36px;
    }
    to {
      max-height: 500px;
    }
  }
};