/*
  This file is separated from globals.css in order to work around a strange issue that triggers full-app reloads on save.
  As long as `tailwindcss -i ./src/tailwind-reload-workaround.css -o ./dist/tailwind-reload-workaround.css --watch` is run simultaneously with `next dev`,
  hot-reloading and style updates should work as expected.

  `yarn dev` should be set up to run both.
*/

@import 'tailwindcss' source('../src');
@import './colors.css' layer(base);
@import './themes.css' layer(base);
@import './tailwind-theme-config.css' layer(theme);

@config '../tailwind.config.ts';

/* Figma color variables */
@layer base {
  :root {
    scrollbar-color: var(--color-foreground-inactive) transparent;

    /* Global component color definitions */
    --button-background-image: url('https://cdn-o.suno.com/aura_horizontal.jpg');
    --button-background-image-overlay: url('https://cdn-o.suno.com/grain.webp');
    --button-background-hover-speed: 3s;
    --button-background-aura-orange: url('https://cdn1.suno.ai/sAura5.jpg');
  }
}

@font-face {
  font-family: 'Editorial New';
  font-weight: 300;
  src: url('/static/PPEditorialNew-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Editorial New';
  font-weight: 400;
  src: url('/static/PPEditorialNew-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Input Sans';
  font-weight: 500;
  src: url('/static/InputSans-Medium.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  font-weight: 300;
  src: url('/static/PPNeueMontreal-Book.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  font-weight: 400;
  src: url('/static/PPNeueMontreal-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  font-weight: 500;
  src: url('/static/PPNeueMontreal-Medium.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  font-weight: 600;
  src: url('/static/PPNeueMontreal-SemiBold.woff') format('woff');
  font-display: swap;
}

@layer base {
  :root {
    --max-width: 1100px;
    --border-radius: 12px;
    --font-mono:
      ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
      'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
      'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

    --foreground-rgb: var(--rgb-foreground-primary);
    --background-start-rgb: var(--rgb-background-secondary);
    --background-end-rgb: var(--rgb-background-primary);

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(
      to bottom right,
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0.3)
    );

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(
      #ffffff80,
      #ffffff40,
      #ffffff30,
      #ffffff20,
      #ffffff10,
      #ffffff10,
      #ffffff80
    );

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  html,
  body {
    max-width: 100vw;
    height: auto; /* this is set to auto in the globals.css file to allow the url bar to collapse on mobile web */
    font-family:
      'Neue Montreal',
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    color-scheme: dark;
  }

  body {
    color: var(--color-foreground-primary);
    background: var(--color-background-primary);
  }

  /* CSS reset for numeric inputs */
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }

  /*
  set the height / overflow container here for desktop widths because pages like home, create, hooks, etc were built under the assumption that
  the body & html tags have height 100% and the components within them are scrollable. this is in contrast to mobile web where
  height is set to auto and no overflow container is set so that scrolling happens on the document level to collapse the url bar.
  */
  @media (min-width: 768px) {
    html,
    body {
      height: 100%;
      overflow-x: hidden;
    }
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .cl-footerAction {
    flex-direction: column;
  }

  .cl-footer {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column-reverse;
  }

  .cl-footerPages {
    display: inline;
  }

  .cl-footerActionText,
  .cl-footerPagesLink {
    font-size: 0.75rem;
  }

  .cl-footerPagesLink__privacy {
    margin-right: 3px;
  }

  .cl-userButtonPopoverFooter {
    display: none;
  }

  .cl-userProfile-root,
  .cl-userProfile-root .cl-card {
    width: 100%;
  }

  .react-aria-GridListItem,
  .react-aria-GridListItem[data-focused] {
    outline: none;
  }

  [data-radix-collection-item]:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .moreActionsTrigger:focus-visible {
    box-shadow: var(--chakra-shadows-outline);
  }

  /* Keeping styles for neon logo/object here, to be activated anytime... */
  @keyframes rainbow-color {
    0% {
      color: #ff9393;
      filter: drop-shadow(0 0 5px #ff9393);
    }

    14% {
      color: #ffb978;
      filter: drop-shadow(0 0 5px #ffb978);
    }

    28% {
      color: #ffec7d;
      filter: drop-shadow(0 0 5px #ffec7d);
    }

    42% {
      color: #91ff82;
      filter: drop-shadow(0 0 5px #91ff82);
    }

    57% {
      color: #9ce7ff;
      filter: drop-shadow(0 0 5px #9ce7ff);
    }

    65% {
      color: #89acff;
      filter: drop-shadow(0 0 5px #89acff);
    }

    71% {
      color: #cf99ff;
      filter: drop-shadow(0 0 5px #cf99ff);
    }

    85% {
      color: violet;
      filter: drop-shadow(0 0 5px violet);
    }

    100% {
      color: #ff9393;
      filter: drop-shadow(0 0 5px #ff9393);
    }
  }

  .neon-glow-on-hover:hover {
    animation: rainbow-color 7s infinite;
  }

  .neon-glow-on-hover:hover svg {
    fill: currentColor;
  }

  @keyframes neon-text-color {
    0% {
      fill: #ff9393;
    }

    14% {
      fill: #ffb978;
    }

    28% {
      fill: #ffec7d;
    }

    42% {
      fill: #91ff82;
    }

    57% {
      fill: #9ce7ff;
    }

    71% {
      fill: #89acff;
    }

    85% {
      fill: #cf99ff;
    }

    100% {
      fill: #ff9393;
    }
  }

  .neon-glow-on-hover:hover svg path {
    animation: neon-text-color 7s infinite;
  }

  .no-drag {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /**
   * Body cursor styles for dragging
   */
  body.cursor-pointer *,
  body.cursor-pointer {
    cursor: pointer;
  }
  body.cursor-grabbing *,
  body.cursor-grabbing {
    cursor: grabbing;
  }

  .cl-footerAction {
    margin: 0px !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .cl-footerActionLink {
    background-color: #faf7f5;
    color: #0e0808 !important;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .cl-footerActionLink:hover {
    color: #0e0808;
    /* Change this to your desired hover color */
    text-decoration: none;
    background-color: rgba(250, 247, 245, 0.7);
  }

  .cl-formResendCodeLink {
    color: #faf7f5;
  }

  .cl-socialButtons {
    display: flex;
  }

  .cl-cardBox {
    font-family: 'Neue Montreal' !important;
  }

  /* Clerk hacks for light mode */
  .cl-scrollBox,
  .cl-scrollBox *,
  .cl-cardBox,
  .cl-menuList * {
    background-color: var(--color-background-primary) !important;
    color: var(--color-foreground-primary) !important;
    border-color: var(--color-border-primary) !important;
  }
  .cl-menuList {
    background-color: var(--color-background-secondary) !important;
  }
  .cl-navbar {
    background: var(--color-background-secondary) !important;
  }
  .cl-navbar * {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-foreground-primary) !important;
    display: none;
  }
  div.cl-navbarMobileMenuRow {
    background: transparent !important;
  }
  body.theme-light button.cl-menuItem#apple img {
    filter: none !important;
  }
  button.cl-menuItem#apple img {
    background-color: transparent !important;
  }

  .cl-socialButtonsIconButton,
  .cl-phoneInputBox {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0.375rem;
    padding: 4px;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  @keyframes randomBackground {
    0% {
      background-position: 50% 50%;
    }

    25% {
      background-position: 30% 70%;
    }

    50% {
      background-position: 70% 30%;
    }

    75% {
      background-position: 40% 60%;
    }

    100% {
      background-position: 50% 50%;
    }
  }

  .auraAnimate {
    position: relative;
    display: inline-block;
    background-image: url('https://cdn-o.suno.com/auras/Aura-03.jpg');
    background-size: 150%;
    background-position: 50% 50%;
    transition: background 1s ease-in-out;
    overflow: hidden;
  }

  .auraAnimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://cdn-o.suno.com/grain.webp');
    background-size: cover;
    background-repeat: repeat;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
  }

  .auraAnimate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
  }

  .auraAnimate:hover {
    animation: randomBackground 100s linear infinite;
  }

  .auraAnimate span {
    position: relative;
    z-index: 3;
  }

  .animated-wave-background {
    background-size: 700%;

    -webkit-animation: animation 3s ease infinite;
    -moz-animation: animation 3s ease infinite;
    animation: animation 3s ease infinite;
    background-image: linear-gradient(
      90deg,
      #ffffff00,
      #ffffff00,
      #ffffff22,
      #ffffff00,
      #ffffff00
    );
  }

  @keyframes animation {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .custom-scrollbar-transparent {
    /* For Webkit browsers (Chrome, Safari) */
    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: transparent !important;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
    }

    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .custom-scrollbar-semitransparent {
    /* For Webkit browsers (Chrome, Safari) */
    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05) !important;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
    }

    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
  }

  /* Display modes: add padding to bottom if running as PWA */
  @media (display-mode: standalone) {
    body {
      padding-bottom: 20px;
      background-color: var(--color-background-primary) !important;
    }

    html {
      overscroll-behavior: none !important;
    }
  }
}