/*
  derived variables based on --nav-bar-background-color

  you are free to provided a concrete value for any of these variables
*/

:root {
    --nav-bar-text-color: white;
    --nav-bar-tint-color: white;

    --nav-bar-link-background-color: color-mix(in srgb, var(--nav-bar-tint-color) 15%, var(--nav-bar-background-color) );
    --nav-bar-link-background-hover-color: color-mix(in srgb, var(--nav-bar-tint-color) 5%, var(--nav-bar-background-color) );

    --nav-bar-highlight-color: color-mix(in srgb, var(--nav-bar-tint-color) 45%, var(--nav-bar-background-color) );
    --nav-bar-highlight-hover-color: color-mix(in srgb, var(--nav-bar-tint-color) 30%, var(--nav-bar-background-color) );

    --nav-bar-menu-background-color: color-mix(in srgb, var(--nav-bar-tint-color) 25%, var(--nav-bar-background-color));
    --nav-bar-menu-background-focus-color: color-mix(in srgb, var(--nav-bar-tint-color) 25%, var(--nav-bar-background-color));
    --nav-bar-menu-border-focus-color: color-mix(in srgb, var(--nav-bar-tint-color) 45%, var(--nav-bar-background-color) );
    --nav-bar-menu-background-hover-color: color-mix(in srgb, var(--nav-bar-tint-color) 15%, var(--nav-bar-background-color) );
    --nav-bar-menu-border-hover-color: color-mix(in srgb, var(--nav-bar-tint-color) 45%, var(--nav-bar-background-color) );
}