@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@theme {
	/*
	Configure your Tailwind theme that will be used by Starlight.
	https://starlight.astro.build/guides/css-and-tailwind/#styling-starlight-with-tailwind
	*/

	/* Custom accent colors (primary palette) */
	--color-accent-50: #E8F5E9;
	--color-accent-100: #C8E6C9;
	--color-accent-200: #A5D6A7;
	--color-accent-300: #81C784;
	--color-accent-400: #66BB6A;
	--color-accent-500: #4CAF50;
	--color-accent-600: #43A047;
	--color-accent-700: #388E3C;
	--color-accent-800: #2E7D32;
	--color-accent-900: #1B5E20;

	/* Custom gray scale */
	--color-gray-100: #f4f7f8;
	--color-gray-200: #e9eff2;
	--color-gray-300: #bcc3c7;
	--color-gray-400: #808e95;
	--color-gray-500: #4d5a61;
	--color-gray-700: #2e3a40;
	--color-gray-800: #1d292f;
	--color-gray-900: #14191c;
}

/* Dark mode colors. */
:root {
  /* crowdin colors */
  --crowdin-blacks: 0, 0, 0;
  --crowdin-whites: 255, 255, 255;
  --crowdin-primaries-color: 78, 183, 83;
  --crowdin-typeface-color: 255, 255, 255;
  --crowdin-cards-color: 255, 255, 255;
  --crowdin-gray-005: rgba(var(--crowdin-typeface-color), 0.05);
  --crowdin-gray-01: rgba(var(--crowdin-typeface-color), 0.12);
  --crowdin-level-0-bg: #16191d;
  --crowdin-level-1-bg: #21252b;
  --crowdin-level-2-bg: #2c3139;
  --crowdin-title-color: rgba(var(--crowdin-typeface-color), 1);
  --crowdin-body-color: rgba(var(--crowdin-typeface-color), .87);
  --crowdin-text-muted: rgba(var(--crowdin-typeface-color), .54);

  /* starlight */
  --sl-content-width: 50rem;
  --sl-hue-blue: 207;
  --sl-nav-gap: .5rem;
  --sl-color-text: var(--crowdin-body-color);
  --sl-color-accent: rgba(var(--crowdin-primaries-color), 1);
  --sl-color-text-accent: rgba(var(--crowdin-primaries-color), 1);
  --sl-color-bg: var(--crowdin-level-0-bg);
  --sl-color-bg-nav: var(--crowdin-level-2-bg);
  --sl-color-bg-sidebar: var(--crowdin-level-1-bg);
}

/* Light mode colors. */
:root[data-theme='light'] {
  /* crowdin colors */
  --crowdin-primaries-color: 67, 160, 71;
  --crowdin-typeface-color: 38, 50, 56;
  --crowdin-cards-color: 38, 50, 56;
  --crowdin-title-color: rgba(var(--crowdin-typeface-color), 1);
  --crowdin-gray-005: rgba(var(--crowdin-cards-color), 0.05);
  --crowdin-gray-01: rgba(var(--crowdin-cards-color), 0.1);
  --crowdin-level-0-bg: #f5f7f8;
  --crowdin-level-1-bg: #ffffff;
  --crowdin-level-2-bg: #ffffff;

  /* starlight */
  --sl-color-accent: rgba(var(--crowdin-primaries-color), 1);
  --sl-color-text-accent: rgba(var(--crowdin-primaries-color), 1);
  --sl-color-bg: var(--crowdin-level-1-bg);
  --sl-color-bg-sidebar: var(--crowdin-level-0-bg);
  --sl-color-bg-nav: var(--crowdin-level-2-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
  color: var(--crowdin-title-color);
}

/* Markdown heading links */

.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
  color: var(--sl-color-white);
  text-decoration: none;
  border-bottom: 2px solid transparent;

  &:hover {
    border-bottom-color: var(--crowdin-gray-01);
    color: var(--crowdin-body-color);
  }
}

/* Markdown content */

.sl-markdown-content {
  blockquote {
    color: var(--crowdin-text-muted);

    &:not(:where(.not-content *)) {
      border-left: 3px solid var(--sl-color-gray-5);
    }
  }

  img:not(.no-shadow) {
    border-radius: 10px;
    border: 1px solid var(--sl-color-gray-6);
    box-shadow: var(--sl-shadow-sm);
    margin-top: 0.5rem;

    &.crowdin-modal {
      border-radius: 2rem;
    }
  }

  .inline-icon {
    display: inline;
    margin: 0 0.25rem;
  }

  li > .inline-icon {
    margin-bottom: -2px !important;
  }

  .text-muted {
    color: var(--crowdin-text-muted);
  }

  /* Screenshots width */

  /* 384px */
  .width-sm {
    @apply max-w-sm!;
    @apply w-full!; /* 100% */
  }

  /* 448px */
  .width-md {
    @apply max-w-md!;
    @apply w-full!;
  }

  /* 512px */
  .width-lg {
    @apply max-w-lg!;
    @apply w-full!;
  }

  /* 576px */
  .width-xl {
    @apply max-w-xl!;
    @apply w-full!;
  }

  /* 672px */
  .width-2xl {
    @apply max-w-2xl!;
    @apply w-full!;
  }
}

/* Header */

.header {
  .site-title {
    min-width: 160px;
  }

  .title-wrapper {
    /* search */

    & + .sl-flex {
      justify-content: flex-end;
      margin-right: 0.5rem;
    }
  }
}

/** Search results */

.pagefind-ui__result-inner > .pagefind-ui__result-title > .pagefind-ui__result-link[href^="/enterprise/"]::after,
.pagefind-ui__result-inner > .pagefind-ui__result-title > .pagefind-ui__result-link[href^="/developer/"]::after {
  inset: auto !important;
  border-radius: 0.25rem;
  pointer-events: none;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 4px;
  padding: 0 5px;
}

.pagefind-ui__result-inner > .pagefind-ui__result-title > .pagefind-ui__result-link[href^="/enterprise/"]::after {
  content: "enterprise" !important;
  background-color: var(--sl-badge-success-bg);
  color: var(--sl-badge-success-text);
  border: 1px solid var(--sl-badge-success-border);
}

.pagefind-ui__result-inner > .pagefind-ui__result-title > .pagefind-ui__result-link[href^="/developer/"]::after {
  content: "dev portal" !important;
  background-color: var(--sl-badge-tip-bg);
  color: var(--sl-badge-tip-text);
  border: 1px solid var(--sl-badge-tip-border);
}

/* Aside */

.starlight-aside {
  border-start-end-radius: .5rem;
  border-end-end-radius: .5rem;
}

/* Sidebar */

.sidebar-content [aria-current='page'],
.sidebar-content [aria-current='page']:hover,
.sidebar-content [aria-current='page']:focus {
  color: var(--crowdin-title-color);
  background-color: var(--crowdin-level-2-bg);
  border-radius: 6px;
  box-shadow: 0 2px 3px 0 rgba(var(--crowdin-blacks), .04);
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--sl-color-text-accent);
    top: 5px;
    left: 0;
    bottom: 5px;
  }
}

.sidebar-content li a {
  padding: .5em var(--sl-sidebar-item-padding-inline) .5em 1em;
  color: var(--crowdin-body-color);

  &:hover {
    color: var(--crowdin-title-color);
  }
}

.sidebar-content summary + ul {
  margin: .25rem 0;
}

.sidebar-content details {
  margin-bottom: .5rem;
}

/* Tabs */

starlight-tabs {
  margin-top: 2rem !important;

  .tab > [role='tab'] {
    padding: .5rem 1.25rem;
    border-radius: .25rem .25rem 0 0;

    &:hover {
      background-color: var(--crowdin-gray-005);
    }
  }
}

/* Steps */

.sl-steps > li::before {
  background-color: var(--crowdin-gray-005) !important;
  box-shadow: inset 0 0 0 1px var(--crowdin-gray-01) !important;
}
