@import "tailwindcss";
@import "tw-animate-css";
@import "sonner/dist/styles.css";

@custom-variant dark (&:is(.dark *));

html,
body {
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@import "./themes/base.css";
@import "./themes/alby.css";
@import "./themes/bitcoin.css";
@import "./themes/nostr.css";
@import "./themes/matrix.css";
@import "./themes/ghibli.css";
@import "./themes/claymorphism.css";

@import "./themes/index.css";

@layer base {
  [role="dialog"],
  [role="alertdialog"] {
    max-height: 90vh;
    overflow-y: auto;
  }
}

@layer base {
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

@layer base {
  [role="menuitem"]:not([disabled]),
  [data-slot="command-item"],
  [data-slot="field"] {
    cursor: pointer !important;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes flash {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* bitcoin-connect styles */
html {
  --bc-color-brand: hsl(0 0% 0%); /* use a different brand color in dark mode */
  --bc-color-brand-dark: hsl(
    0 0% 100%
  ); /* use a different brand color in dark mode */
  --bc-brand-mix: 100%; /* how much to mix the brand color with default foreground color */
}

/* https://github.com/tailwindlabs/tailwindcss/discussions/12127 */
.break-anywhere {
  overflow-wrap: anywhere;
}

/* Removes an arrow on the datalist of word suggestions when you are typing a word in the import secret key page.
   See https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome */
input[type="text"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* used by AppAvatar as fallback for apps without known images  */
.avatar-gradient-0 {
  background: linear-gradient(135deg, var(--chart-1), var(--chart-3));
}
.avatar-gradient-1 {
  background: linear-gradient(135deg, var(--chart-2), var(--chart-4));
}
.avatar-gradient-2 {
  background: linear-gradient(135deg, var(--chart-3), var(--chart-5));
}
.avatar-gradient-3 {
  background: linear-gradient(135deg, var(--chart-4), var(--chart-1));
}
.avatar-gradient-4 {
  background: linear-gradient(135deg, var(--chart-5), var(--chart-2));
}
.avatar-gradient-5 {
  background: linear-gradient(135deg, var(--chart-1), var(--chart-4));
}
.avatar-gradient-6 {
  background: linear-gradient(135deg, var(--chart-2), var(--chart-5));
}
.avatar-gradient-7 {
  background: linear-gradient(135deg, var(--chart-3), var(--chart-1));
}
.avatar-gradient-8 {
  background: linear-gradient(135deg, var(--chart-4), var(--chart-2));
}
.avatar-gradient-9 {
  background: linear-gradient(135deg, var(--chart-5), var(--chart-3));
}