/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
// Import Sass color module
@use "sass:color";

// Functions to calculate color variations using the modern color.scale approach
@function lighten-percentage($color, $percentage) {
  @return color.scale($color, $lightness: $percentage * 1%);
}

@function darken-percentage($color, $percentage) {
  @return color.scale($color, $lightness: -$percentage * 1%);
}

// Define base colors for light and dark themes
// Light theme colors
$primary-color-light-theme: #1d63ed;
$success-color-light-theme: #00a400;
$info-color-light-theme: #54c7ec;
$warning-color-light-theme: #ffba00;
$danger-color-light-theme: #fa383e;
$secondary-color-light-theme: #ebedf0;

// Dark theme colors
$primary-color-dark-theme: #6cace4;
$success-color-dark-theme: #88e36b;
$info-color-dark-theme: #5dccf0;
$warning-color-dark-theme: #ffc93d;
$danger-color-dark-theme: #ff6369;
$secondary-color-dark-theme: #afafaf;

// Code syntax highlighting theme
:root {
  --docusaurus-highlighted-code-line-bg: rgb(143 142 69 / 11%);
  // --ifm-code-font-size: 95%;
}

/* You can override the default Infima variables here. */
:root {
  // Primary color and its variations
  --ifm-color-primary: #{$primary-color-light-theme};
  --ifm-color-primary-dark: #{darken-percentage($primary-color-light-theme, 5)};
  --ifm-color-primary-darker: #{darken-percentage(
      $primary-color-light-theme,
      10
    )};
  --ifm-color-primary-darkest: #{darken-percentage(
      $primary-color-light-theme,
      15
    )};
  --ifm-color-primary-light: #{lighten-percentage(
      $primary-color-light-theme,
      5
    )};
  --ifm-color-primary-lighter: #{lighten-percentage(
      $primary-color-light-theme,
      10
    )};
  --ifm-color-primary-lightest: #{lighten-percentage(
      $primary-color-light-theme,
      30
    )};
  --ifm-color-primary-contrast-background: #{lighten-percentage(
      $primary-color-light-theme,
      95
    )};
  --ifm-color-primary-contrast-foreground: #{darken-percentage(
      $primary-color-light-theme,
      95
    )};

  // // Secondary color and its variations
  // --ifm-color-secondary: #{$secondary-color-light-theme};
  // --ifm-color-secondary-dark: #{darken-percentage($secondary-color-light-theme, 5)};
  // --ifm-color-secondary-darker: #{darken-percentage($secondary-color-light-theme, 10)};
  // --ifm-color-secondary-darkest: #{darken-percentage($secondary-color-light-theme, 15)};
  // --ifm-color-secondary-light: #{lighten-percentage($secondary-color-light-theme, 5)};
  // --ifm-color-secondary-lighter: #{lighten-percentage($secondary-color-light-theme, 10)};
  // --ifm-color-secondary-lightest: #{lighten-percentage($secondary-color-light-theme, 15)};
  // --ifm-color-secondary-contrast-background: #{lighten-percentage($secondary-color-light-theme, 95)};
  // --ifm-color-secondary-contrast-foreground: #{darken-percentage($secondary-color-light-theme, 95)};

  // Success color and its variations
  --ifm-color-success: #{$success-color-light-theme};
  --ifm-color-success-dark: #{darken-percentage($success-color-light-theme, 5)};
  --ifm-color-success-darker: #{darken-percentage(
      $success-color-light-theme,
      10
    )};
  --ifm-color-success-darkest: #{darken-percentage(
      $success-color-light-theme,
      15
    )};
  --ifm-color-success-light: #{lighten-percentage(
      $success-color-light-theme,
      10
    )};
  --ifm-color-success-lighter: #{lighten-percentage(
      $success-color-light-theme,
      20
    )};
  --ifm-color-success-lightest: #{lighten-percentage(
      $success-color-light-theme,
      30
    )};
  --ifm-color-success-contrast-background: #{lighten-percentage(
      $success-color-light-theme,
      95
    )};
  --ifm-color-success-contrast-foreground: #{darken-percentage(
      $success-color-light-theme,
      95
    )};

  // Info color and its variations
  --ifm-color-info: #{$info-color-light-theme};
  --ifm-color-info-dark: #{darken-percentage($info-color-light-theme, 5)};
  --ifm-color-info-darker: #{darken-percentage($info-color-light-theme, 10)};
  --ifm-color-info-darkest: #{darken-percentage($info-color-light-theme, 15)};
  --ifm-color-info-light: #{lighten-percentage($info-color-light-theme, 5)};
  --ifm-color-info-lighter: #{lighten-percentage($info-color-light-theme, 10)};
  --ifm-color-info-lightest: #{lighten-percentage($info-color-light-theme, 20)};
  --ifm-color-info-contrast-background: #{lighten-percentage(
      $info-color-light-theme,
      95
    )};
  --ifm-color-info-contrast-foreground: #{darken-percentage(
      $info-color-light-theme,
      95
    )};

  // Warning color and its variations
  --ifm-color-warning: #{$warning-color-light-theme};
  --ifm-color-warning-dark: #{darken-percentage($warning-color-light-theme, 5)};
  --ifm-color-warning-darker: #{darken-percentage(
      $warning-color-light-theme,
      10
    )};
  --ifm-color-warning-darkest: #{darken-percentage(
      $warning-color-light-theme,
      15
    )};
  --ifm-color-warning-light: #{lighten-percentage(
      $warning-color-light-theme,
      5
    )};
  --ifm-color-warning-lighter: #{lighten-percentage(
      $warning-color-light-theme,
      10
    )};
  --ifm-color-warning-lightest: #{lighten-percentage(
      $warning-color-light-theme,
      20
    )};
  --ifm-color-warning-contrast-background: #{lighten-percentage(
      $warning-color-light-theme,
      95
    )};
  --ifm-color-warning-contrast-foreground: #{darken-percentage(
      $warning-color-light-theme,
      95
    )};

  // Danger color and its variations
  --ifm-color-danger: #{$danger-color-light-theme};
  --ifm-color-danger-dark: #{darken-percentage($danger-color-light-theme, 5)};
  --ifm-color-danger-darker: #{darken-percentage($danger-color-light-theme, 10)};
  --ifm-color-danger-darkest: #{darken-percentage(
      $danger-color-light-theme,
      15
    )};
  --ifm-color-danger-light: #{lighten-percentage($danger-color-light-theme, 5)};
  --ifm-color-danger-lighter: #{lighten-percentage(
      $danger-color-light-theme,
      10
    )};
  --ifm-color-danger-lightest: #{lighten-percentage(
      $danger-color-light-theme,
      20
    )};
  --ifm-color-danger-contrast-background: #{lighten-percentage(
      $danger-color-light-theme,
      95
    )};
  --ifm-color-danger-contrast-foreground: #{darken-percentage(
      $danger-color-light-theme,
      95
    )};
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  // Primary color and its variations for dark mode
  --ifm-color-primary: #{$primary-color-dark-theme};
  --ifm-color-primary-dark: #{darken-percentage($primary-color-dark-theme, 10)};
  --ifm-color-primary-darker: #{darken-percentage(
      $primary-color-dark-theme,
      15
    )};
  --ifm-color-primary-darkest: #{darken-percentage(
      $primary-color-dark-theme,
      30
    )};
  --ifm-color-primary-light: #{lighten-percentage(
      $primary-color-dark-theme,
      10
    )};
  --ifm-color-primary-lighter: #{lighten-percentage(
      $primary-color-dark-theme,
      15
    )};
  --ifm-color-primary-lightest: #{lighten-percentage(
      $primary-color-dark-theme,
      30
    )};
  --ifm-color-primary-contrast-background: #{darken-percentage(
      $primary-color-dark-theme,
      90
    )};
  --ifm-color-primary-contrast-foreground: #{lighten-percentage(
      $primary-color-dark-theme,
      90
    )};

  // Secondary color and its variations
  --ifm-color-secondary: #{$secondary-color-dark-theme};
  --ifm-color-secondary-dark: #{darken-percentage(
      $secondary-color-dark-theme,
      5
    )};
  --ifm-color-secondary-darker: #{darken-percentage(
      $secondary-color-dark-theme,
      10
    )};
  --ifm-color-secondary-darkest: #{darken-percentage(
      $secondary-color-dark-theme,
      15
    )};
  --ifm-color-secondary-light: #{lighten-percentage(
      $secondary-color-dark-theme,
      5
    )};
  --ifm-color-secondary-lighter: #{lighten-percentage(
      $secondary-color-dark-theme,
      10
    )};
  --ifm-color-secondary-lightest: #{lighten-percentage(
      $secondary-color-dark-theme,
      15
    )};
  --ifm-color-secondary-contrast-background: #{darken-percentage(
      $secondary-color-dark-theme,
      90
    )};
  --ifm-color-secondary-contrast-foreground: #{lighten-percentage(
      $secondary-color-dark-theme,
      90
    )};

  // Success color for dark mode
  --ifm-color-success: #{$success-color-dark-theme};
  --ifm-color-success-dark: #{darken-percentage($success-color-dark-theme, 10)};
  --ifm-color-success-darker: #{darken-percentage(
      $success-color-dark-theme,
      15
    )};
  --ifm-color-success-darkest: #{darken-percentage(
      $success-color-dark-theme,
      35
    )};
  --ifm-color-success-light: #{lighten-percentage(
      $success-color-dark-theme,
      10
    )};
  --ifm-color-success-lighter: #{lighten-percentage(
      $success-color-dark-theme,
      15
    )};
  --ifm-color-success-lightest: #{lighten-percentage(
      $success-color-dark-theme,
      30
    )};
  --ifm-color-success-contrast-background: #{darken-percentage(
      $success-color-dark-theme,
      90
    )};
  --ifm-color-success-contrast-foreground: #{lighten-percentage(
      $success-color-dark-theme,
      90
    )};

  // Info color and its variations
  --ifm-color-info: #{$info-color-dark-theme};
  --ifm-color-info-dark: #{darken-percentage($info-color-dark-theme, 10)};
  --ifm-color-info-darker: #{darken-percentage($info-color-dark-theme, 15)};
  --ifm-color-info-darkest: #{darken-percentage($info-color-dark-theme, 30)};
  --ifm-color-info-light: #{lighten-percentage($info-color-dark-theme, 10)};
  --ifm-color-info-lighter: #{lighten-percentage($info-color-dark-theme, 15)};
  --ifm-color-info-lightest: #{lighten-percentage($info-color-dark-theme, 30)};
  --ifm-color-info-contrast-background: #{darken-percentage(
      $info-color-dark-theme,
      90
    )};
  --ifm-color-info-contrast-foreground: #{lighten-percentage(
      $info-color-dark-theme,
      90
    )};

  // Warning color and its variations
  --ifm-color-warning: #{$warning-color-dark-theme};
  --ifm-color-warning-dark: #{darken-percentage($warning-color-dark-theme, 10)};
  --ifm-color-warning-darker: #{darken-percentage(
      $warning-color-dark-theme,
      15
    )};
  --ifm-color-warning-darkest: #{darken-percentage(
      $warning-color-dark-theme,
      30
    )};
  --ifm-color-warning-light: #{lighten-percentage(
      $warning-color-dark-theme,
      10
    )};
  --ifm-color-warning-lighter: #{lighten-percentage(
      $warning-color-dark-theme,
      15
    )};
  --ifm-color-warning-lightest: #{lighten-percentage(
      $warning-color-dark-theme,
      30
    )};
  --ifm-color-warning-contrast-background: #{darken-percentage(
      $warning-color-dark-theme,
      90
    )};
  --ifm-color-warning-contrast-foreground: #{lighten-percentage(
      $warning-color-dark-theme,
      90
    )};

  // Danger color and its variations
  --ifm-color-danger: #{$danger-color-dark-theme};
  --ifm-color-danger-dark: #{darken-percentage($danger-color-dark-theme, 10)};
  --ifm-color-danger-darker: #{darken-percentage($danger-color-dark-theme, 15)};
  --ifm-color-danger-darkest: #{darken-percentage($danger-color-dark-theme, 30)};
  --ifm-color-danger-light: #{lighten-percentage($danger-color-dark-theme, 10)};
  --ifm-color-danger-lighter: #{lighten-percentage(
      $danger-color-dark-theme,
      15
    )};
  --ifm-color-danger-lightest: #{lighten-percentage(
      $danger-color-dark-theme,
      30
    )};
  --ifm-color-danger-contrast-background: #{darken-percentage(
      $danger-color-dark-theme,
      90
    )};
  --ifm-color-danger-contrast-foreground: #{lighten-percentage(
      $danger-color-dark-theme,
      90
    )};
}

.navbar-github-link::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background-color: var(--ifm-navbar-link-color);
  mask-image: url(../../static/img/favicon-navbar/github.svg);
}

// Custom styles for resource landing page
.resourceLandingPage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 80px;
  width: min-content;
}

// Styles for preview components
.preview {
  position: relative;
  margin-top: 2rem;
  // margin-bottom: 2rem;
  display: flex;
  justify-content: center;

  &::before {
    content: "Preview";
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0.5rem;
    background-color: var(--ifm-background-surface-color);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ifm-color-emphasis-700);
    z-index: 1;
  }

  .container {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: 8px;
    // padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    width: fit-content;
    position: relative;
  }
}

[data-theme="dark"] {
  .preview {
    &::before {
      background-color: var(--ifm-background-color);
    }
  }
}

// Title logo styles - unified system for sidebar and navbar logos
$title-logo-icon-size: 20px;

// Mixin for adding logo icons to sidebar items
@mixin title-logo-sidebar {
  // Only target the immediate menu link for the matching item, not its children
  > .menu__link,
  > .menu__list-item-collapsible > .menu__link,
  > .menu__list-item-collapsible > a,
  > div > a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;

    &::before {
      content: "";
      display: inline-block;
      width: $title-logo-icon-size;
      height: $title-logo-icon-size;
      background-image: var(--title-logo-image, none);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
    }
  }
}

// Mixin for adding logo icons to navbar items
@mixin title-logo-navbar {
  display: flex;
  align-items: center;
  gap: 8px;

  &::before {
    content: "";
    display: inline-block;
    width: $title-logo-icon-size;
    height: $title-logo-icon-size;
    background-image: var(--title-logo-image, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
  }
}

// Apply sidebar logo styles to elements with title-logo-sidebar-* classes
[class*="title-logo-sidebar-"] {
  @include title-logo-sidebar;
}

// Apply navbar logo styles to elements with title-logo-navbar-* classes
[class*="title-logo-navbar-"] {
  @include title-logo-navbar;
}

// Legacy support - map old sidebar-logo-* classes to new system
.sidebar-logo,
[class*="sidebar-logo-"] {
  @include title-logo-sidebar;
}

// Logo definitions - shared between sidebar and navbar
// Slidev logo
.title-logo-sidebar-slidev,
.title-logo-navbar-slidev {
  --title-logo-image: url(../../static/img/sidebar/slidev.svg);
}

// Docusaurus logo
.title-logo-sidebar-docusaurus,
.title-logo-navbar-docusaurus {
  --title-logo-image: url(../../static/img/sidebar/docusaurus.svg);
}

// SP Days logo (with theme support)
.title-logo-sidebar-sp-days,
.title-logo-navbar-sp-days {
  --title-logo-image: url(../../static/img/sp-days-logo-color-light.svg);
}

// SP Days Plugin logo (with theme support)
.title-logo-sidebar-sp-days-plugin,
.title-logo-navbar-sp-days-plugin {
  --title-logo-image: url(../../static/img/sp-days-plugin-color-light.svg);
}