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

:root {
  --island-c-brand: #fdaa04;
  --island-c-brand-light: #ffaa00;
  --island-c-brand-dark: #e9a00d;
  --island-c-brand-darker: #f0b338;
  --island-c-bg: #ffffff;

  --island-c-text-code: #e9a00d;
  --island-button-brand-hover-border: #fdd481;

  --island-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    var(--island-c-brand) 30%,
    var(--island-c-brand-light)
  );

  --island-font-family-base: 'Poppins', 'Inter var experimental', 'Inter var', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.dark {
  --island-c-bg: #131313;
  --island-c-bg-alt: #171717;
  --island-c-black-mute: #1e1e1e;
}

.island-doc h1 {
  margin-left: -10px;
  margin-bottom: 10px;
}
.island-doc h2 {
  margin-left: -8px;
  margin-bottom: 5px;
}
.island-doc h3 {
  margin-left: -6px;
  margin-bottom: 10px;
}

.usage_preview_box {
  font-family: 'JetBrains Mono', monospace !important;
}

#nprogress .bar {
  background: var(--island-c-brand) !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow:
    0 0 10px var(--island-c-brand),
    0 0 5px var(--island-c-brand-darker);
}

footer {
  border: none !important;
  display: none !important;
}

pre.prism-code {
  background-color: var(--echo-background) !important;
  border-radius: 0.25rem;
  padding: 1rem;
  overflow: auto;
}

pre {
  background-color: var(--echo-background) !important;
  font-size: 0.85rem !important;
  font-family: 'JetBrains Mono', monospace !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 3px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 3px;
  background-color: var(--echo-muted);
}

.dark ._has-sidebar_1ic07_16 ._content_1ic07_24 {
  background: none;
}

table,
thead th {
  font-size: 0.85rem !important;
}

tbody td:nth-child(1) {
  min-width: 150px !important;
  font-weight: 600 !important;
}

tbody td:nth-child(2) {
  width: 270px !important;
  min-width: 200px !important;
}

tbody td:nth-child(3) {
  max-width: 200px !important;
  overflow-x: scroll;
}

tbody td:nth-child(4) {
  max-width: 150px !important;
  overflow-x: scroll;
}

button[data-slot='tab'] {
  outline: none !important;
}
