// Light mode
$ginColors: (
  blue: #0550e6,
  light_blue: #2f6dd0,
  dark_purple: #4300bf,
  purple: #5b00ff,
  teal: #10857f,
  green: #00875f,
  red: #d8002f,
  orange: #da6301,
  yellow: #b37a00,
  pink: #d12f70,
  neutral: #111111,
  custom: #111111,
);

@each $name, $color in $ginColors {
  [data-gin-accent=#{'' + $name}] {
    $stickyColor: mix(white, $color, 92%);

    --gin-color-sticky-rgb: #{color.red($stickyColor)}, #{color.green($stickyColor)}, #{color.blue($stickyColor)};
  }
}

// High contrast mode
@media (forced-colors: none) {
  .gin--high-contrast-mode {
    $highContrastMode: rgba(0, 0, 0, .8);

    --gin-bg-app: #d9dbde;
    --gin-color-text: #{$highContrastMode};
    --gin-color-text-light: #{$highContrastMode};
    --gin-icon-color: #{$highContrastMode};
    --gin-color-focus: #{$highContrastMode};
    --gin-border-color: #{$highContrastMode};
    --gin-border-color-secondary: rgba(0, 0, 0, .6);
    --gin-border-color-layer: rgba(0, 0, 0, .6);
    --gin-border-color-layer2: #{$highContrastMode};
    --gin-border-color-table: #{$highContrastMode};
    --gin-border-color-table-header: #{$highContrastMode};
    --gin-border-color-form-element: #{$highContrastMode};

    .gin--dark-mode & {
      $highContrastMode: rgba(255, 255, 255, .8);

      --gin-bg-app: #000;
      --gin-color-text: #{$highContrastMode};
      --gin-color-text-light: #{$highContrastMode};
      --gin-icon-color: #{$highContrastMode};
      --gin-color-focus: #{$highContrastMode};
      --gin-border-color: #{$highContrastMode};
      --gin-border-color-secondary: rgba(255, 255, 255, .6);
      --gin-border-color-layer: rgba(255, 255, 255, .6);
      --gin-border-color-layer2: #{$highContrastMode};
      --gin-border-color-table: #{$highContrastMode};
      --gin-border-color-table-header: #{$highContrastMode};
      --gin-border-color-form-element: #{$highContrastMode};
    }
  }
}

// Focus
$ginFocusColors: (
  green: rgba(8, 163, 144, .6), //= #08a390
  claro: rgba(38, 167, 105, .6), //= #26a769
  orange: rgba(236, 124, 87, .6), //= #ec7c57
  dark: var(--gin-color-focus-neutral-rgb),
  accent: rgba(var(--gin-color-primary-rgb), .6),
);

@each $name, $color in $ginFocusColors {
  [data-gin-focus=#{'' + $name}] {
    --gin-color-focus: #{$color};
  }
}
