$border_opacity: if($contrast == 'high', 50%, 15%);
$focus_border_opacity: if($contrast == 'high', 80%, 50%);

// Colors from _defaults.scss

:root {
  --accent-blue: #3584e4;
  --accent-teal: #2190a4;
  --accent-green: #3a944a;
  --accent-yellow: #c88800;
  --accent-orange: #ed5b00;
  --accent-red: #e62d42;
  --accent-pink: #d56199;
  --accent-purple: #9141ac;
  --accent-slate: #6f8396;

  --accent-bg-color: @accent_bg_color;
  --accent-fg-color: @accent_fg_color;

  --destructive-bg-color: @destructive_bg_color;
  --destructive-fg-color: @destructive_fg_color;

  --success-bg-color: @success_bg_color;
  --success-fg-color: @success_fg_color;

  --warning-bg-color: @warning_bg_color;
  --warning-fg-color: @warning_fg_color;

  --error-bg-color: @error_bg_color;
  --error-fg-color: @error_fg_color;

  --window-bg-color: @window_bg_color;
  --window-fg-color: @window_fg_color;

  --view-bg-color: @view_bg_color;
  --view-fg-color: @view_fg_color;

  --headerbar-bg-color: @headerbar_bg_color;
  --headerbar-fg-color: @headerbar_fg_color;
  --headerbar-border-color: @headerbar_border_color;
  --headerbar-backdrop-color: @headerbar_backdrop_color;
  --headerbar-shade-color: @headerbar_shade_color;
  --headerbar-darker-shade-color: @headerbar_darker_shade_color;

  --sidebar-bg-color: @sidebar_bg_color;
  --sidebar-fg-color: @sidebar_fg_color;
  --sidebar-backdrop-color: @sidebar_backdrop_color;
  --sidebar-border-color: @sidebar_border_color;
  --sidebar-shade-color: @sidebar_shade_color;

  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;

  --card-bg-color: @card_bg_color;
  --card-fg-color: @card_fg_color;
  --card-shade-color: @card_shade_color;

  --dialog-bg-color: @dialog_bg_color;
  --dialog-fg-color: @dialog_fg_color;

  --popover-bg-color: @popover_bg_color;
  --popover-fg-color: @popover_fg_color;
  --popover-shade-color: @popover_shade_color;

  --thumbnail-bg-color: @thumbnail_bg_color;
  --thumbnail-fg-color: @thumbnail_fg_color;

  --shade-color: @shade_color;
  --scrollbar-outline-color: @scrollbar_outline_color;
}

// Other colors

$border_color: color-mix(in srgb, currentColor var(--border-opacity), transparent);
$headerbar_border_color: color-mix(in srgb, var(--headerbar-border-color) var(--border-opacity), transparent);
$link_color: var(--accent-color);
$link_visited_color: color-mix(in srgb, var(--accent-color) 80%, var(--view-fg-color));

$hover_color: color-mix(in srgb, currentColor 7%, transparent);
$active_color: color-mix(in srgb, currentColor 16%, transparent);
$selected_color: color-mix(in srgb, currentColor 10%, transparent);
$selected_hover_color: color-mix(in srgb, currentColor 13%, transparent);
$selected_active_color: color-mix(in srgb, currentColor 19%, transparent);

$view_hover_color: color-mix(in srgb, currentColor 4%, transparent);
$view_active_color: color-mix(in srgb, currentColor 8%, transparent);
$view_selected_color: color-mix(in srgb, var(--accent-bg-color) 25%, transparent);
$view_selected_hover_color: color-mix(in srgb, var(--accent-bg-color) 32%, transparent);
$view_selected_active_color: color-mix(in srgb, var(--accent-bg-color) 39%, transparent);

$trough_color: color-mix(in srgb, currentColor 15%, transparent);
$trough_hover_color: color-mix(in srgb, currentColor 20%, transparent);
$trough_active_color: color-mix(in srgb, currentColor 25%, transparent);

$slider_color: color-mix(in srgb, white 80%, var(--view-bg-color));
$slider_hover_color: white;

$osd_fg_color: RGB(255 255 255 / 90%);
$osd_bg_color: RGB(0 0 0 / 70%);
$osd_link_color: color-mix(in srgb, var(--accent-bg-color) 50%, white);
$osd_link_visited_color: color-mix(in srgb, var(--accent-bg-color) 75%, white);

$toast_bg_color: #505053;
$toast_fg_color: white;

$tooltip_border_color: RGB(255 255 255 / 10%);

$drop_target_color: var(--accent-bg-color);

$window_outline_color: RGB(255 255 255 / 7%);

//special cased widget colors
$focus_border_color: color-mix(in srgb, var(--accent-color) $focus_border_opacity, transparent);
$dim_label_opacity: 55%;
$dimmer_opacity: 30%;
$disabled_opacity: 50%;
$strong_disabled_opacity: 30%;

$standalone-color-oklab-light: Min(l, 0.5) a b;
$standalone-color-oklab-dark: Max(l, 0.85) a b;

// High Contrast color overrides
@if $contrast == 'high' {
  $dim_label_opacity: 90%;
  $dimmer_opacity: 80%;
  $disabled_opacity: 40%;

  $trough_color: color-mix(in srgb, currentColor 30%, transparent);
  $trough_hover_color: color-mix(in srgb, currentColor 40%, transparent);
  $trough_active_color: color-mix(in srgb, currentColor 50%, transparent);
  $window_outline_color: RGB(255 255 255 / 30%);
}

:root {
  --border-color: #{$border_color};
  --border-opacity: #{$border_opacity};
  --dim-opacity: #{$dim_label_opacity};
  --disabled-opacity: #{$disabled_opacity};
}
