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

@layer utilities {
  .fa-beat-custom {
    --fa-animation-duration: 0.4s;
    --fa-fade-opacity: 0.6;
    --fa-animation-iteration-count: 1;
    --fa-beat-scale: 1.4;
  }

  .shimmer {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.02) 20%,
      rgba(255, 255, 255, 0.05) 60%,
      rgba(255, 255, 255, 0.02) 80%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
}

@font-face {
  font-family: "Satoshis";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/fonts/Satoshi Symbol.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/fonts/Lato-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  font-style: bold;
  font-weight: 600;
  src:
    local(""),
    url("/fonts/Lato-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src:
    local(""),
    url("/fonts/Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Staatliches";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/fonts/Staatliches Regular 400.ttf") format("truetype");
}

.montserrat {
  font-family: Lato;
  font-weight: 400;
}

.staatliches {
  font-family: Staatliches;
}

:root {
  font-family: Lato;
  --bc-color-brand: var(--accent);
}

html,
body,
#app,
#app > div {
  height: 100%;
  --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
  --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
  --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
  --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
}

/* safe area */

@layer components {
  .pt-sai {
    padding-top: var(--sait);
  }

  .pr-sai {
    padding-right: var(--sair);
  }

  .pb-sai {
    padding-bottom: var(--saib);
  }

  .pl-sai {
    padding-left: var(--sail);
  }

  .px-sai {
    @apply pl-sai pr-sai;
  }

  .py-sai {
    @apply pt-sai pb-sai;
  }

  .p-sai {
    @apply py-sai px-sai;
  }

  .mt-sai {
    padding-top: var(--sait);
  }

  .mr-sai {
    padding-right: var(--sair);
  }

  .mb-sai {
    padding-bottom: var(--saib);
  }

  .ml-sai {
    padding-left: var(--sail);
  }

  .mx-sai {
    @apply ml-sai mr-sai;
  }

  .my-sai {
    @apply mt-sai mb-sai;
  }

  .m-sai {
    @apply my-sai mx-sai;
  }

  .top-sai {
    top: var(--sait);
  }

  .right-sai {
    right: var(--sair);
  }

  .bottom-sai {
    bottom: var(--saib);
  }

  .left-sai {
    left: var(--sail);
  }

  .inset-sai {
    @apply top-sai right-sai bottom-sai left-sai;
  }
}

/* Tippy dark */

.tippy-box[data-theme~="dark"] {
  background-color: #0f0f0e;
  border: 1px solid #403d39;
  box-shadow:
    3px 3px 20px rgba(0, 0, 0, 0.1),
    3px -3px 20px rgba(0, 0, 0, 0.1),
    -3px 3px 20px rgba(0, 0, 0, 0.1),
    -3px -3px 20px rgba(0, 0, 0, 0.1);
}

.tippy-content {
  padding: 0 !important;
}
.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow {
  bottom: -1px !important;
}

.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow:before {
  border-top-color: #403d39;
}

.tippy-box[data-theme~="dark"][data-placement^="bottom"] > .tippy-arrow:before {
  border-bottom-color: #403d39;
}

.tippy-box[data-theme~="dark"][data-placement^="left"] > .tippy-arrow:before {
  border-left-color: #403d39;
}

.tippy-box[data-theme~="dark"][data-placement^="right"] > .tippy-arrow:before {
  border-right-color: #403d39;
}

.tippy-box[data-theme~="dark"] > .tippy-backdrop {
  background-color: #403d39;
}

.tippy-box[data-theme~="dark"] > .tippy-svg-arrow {
  fill: #0f0f0e;
}

/* Tippy transparent */

.tippy-box[data-theme~="transparent"] {
  background-color: transparent;
}

.tippy-box[data-theme~="transparent"][data-placement^="top"] > .tippy-arrow:before {
  border-color: transparent;
}

.tippy-box[data-theme~="transparent"] > .tippy-svg-arrow {
  fill: transparent;
}

/* Long form content */

.long-form-content h1 {
  font-family: Staatliches;
  font-size: 2em;
  line-height: 1.4em;
  margin-top: 1em;
}

.long-form-content h2 {
  font-family: Staatliches;
  font-size: 1.5em;
  line-height: 1em;
  margin-top: 0.7rem;
}

.long-form-content ul {
  list-style: disc;
  list-style-position: inside;
  padding-left: 0;
}

.long-form-content ol {
  list-style: decimal;
  list-style-position: inside;
  padding-left: 0;
}

.long-form-content li {
  margin: 0.5rem 0;
  padding-left: 20px;
  text-indent: -20px;
}

.long-form-content li p {
  display: inline;
}

.long-form-content a {
  text-decoration: underline;
}

.long-form-content em {
  font-family: sans-serif;
}

.long-form-content code {
  background-color: var(--neutral-800);
  line-height: 1.5em;
  box-decoration-break: clone;
  padding: 1px 0.2em;
  border-radius: 3px;
}

.long-form-content pre code {
  display: block;
  overflow: auto;
}

.long-form-content blockquote {
  border-left: 0.25rem solid var(--neutral-600);
  padding: 1rem 0 1rem 1rem;
}

/* Datetime field */

.date-time-field {
  margin: -0.5rem !important;
  padding: 0 !important;
}

.date-time-field input {
  width: 100% !important;
  border: none !important;
  padding: 0.5rem !important;
  --date-picker-background: transparent;
  --date-picker-highlight-border: transparent;
  --date-picker-highlight-shadow: transparent;
}

/* Code blocks */

.code {
  background-color: var(--neutral-800);
  line-height: 1.5em;
  box-decoration-break: clone;
  padding: 1px 0.2em;
}

/* Event Calendar */

.ec-day,
.ec-button {
  cursor: pointer;
}

/* Switches */

.react-switch-bg {
  border: 1px solid var(--neutral-600);
}

/* tiptap */

.tiptap {
  --tiptap-object-bg: var(--neutral-100);
  --tiptap-object-fg: var(--neutral-800);
  --tiptap-active-bg: var(--neutral-200);
  --tiptap-active-fg: var(--neutral-800);
}

.tiptap-suggestions {
  --tiptap-object-bg: var(--neutral-800);
  --tiptap-object-fg: var(--neutral-200);
  --tiptap-active-bg: var(--neutral-700);
  --tiptap-active-fg: var(--neutral-200);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

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

/* anchors and buttons */

.btn {
  @apply bg-white text-black text-xl staatliches rounded whitespace-nowrap flex justify-center items-center gap-2 px-6 h-7 transition-all;
}

.btn.btn-disabled {
  @apply opacity-50 pointer-events-none;
}

.btn.btn-low {
  @apply bg-tinted-700 text-tinted-200;
}

.btn.btn-low:hover {
  @apply bg-tinted-600;
}

.btn.btn-accent {
  @apply bg-accent text-white;
}

.btn.btn-accent:hover {
  @apply bg-accent;
}

.btn.btn-danger {
  @apply text-danger border border-solid border-danger;
}

.btn.btn-circle {
  @apply aspect-square flex justify-center items-center rounded-full !p-0 w-7;
}

.btn.btn-square {
  @apply aspect-square flex justify-center items-center;
}

.btn.btn-tall {
  @apply h-10;
}

.btn.btn-tall.btn-circle {
  @apply w-10;
}
