SU-SWS/decanter

///
/// Color maps for the Main Nav and Secondary Nav Components.
/// "h-" prefix in the color names indicate horizontal orientation, which currently only applies to the top level items
/// of the desktop version of Main Nav component. Colors without the "h-" applies to the Secondary Nav (all items),
/// mobile version of the Main Nav, and the drop down menus of the desktop version of Main Nav.
/// Active color is also used to indicate "current" page.
///
/// Color maps for the default Main Nav and Secondary Nav Components.
///
/// @name $su-nav-colors
///
/// @group variable

$su-nav-colors: (
  bg:                             $su-color-black,
  divider:                        $su-color-cool-grey,

  link:                           $su-color-white,
  link--hover:                    $su-color-white,
  link--active:                   $su-color-white,
  link--expanded:                 $su-color-white,

  border--hover:                  $su-color-white,
  border--active:                 $su-color-digital-red-light,
  border--expanded:               transparent,
  border--active-expanded:        $su-color-white,

  /// Horizontal menu colors (desktop Main Nav 1st level)
  h-link:                         $su-color-black,
  h-link--hover:                  $su-color-digital-red,
  h-link--active:                 $su-color-black,
  h-link--active-hover:           $su-color-digital-red,
  h-link--expanded:               $su-color-black,

  h-border--hover:                $su-color-digital-red,
  h-border--active:               $su-color-black,
  h-border--active-hover:         $su-color-digital-red,
  h-border--expanded:             $su-color-black,
) !default;

//
/// $su-nav-colors--dark
//
/// Color map for the desktop version of the Main Nav dark variant 1st level items.
//
/// Markup: $su-nav-colors--dark: (
///    h-link:                               $su-color-white,
///    h-link--hover:                        $su-color-white,
///    h-link--active:                       $su-color-white,
///    h-link--active-hover:                 $su-color-white,
///    h-link--expanded:                     $su-color-white,
///    h-link--expanded-hover:               $su-color-white,
///    h-border--hover:                      $su-color-white,
///    h-border--active:                     $su-color-digital-red-light,
///    h-border--active-hover:               $su-color-white,
///    h-border--expanded:                   $su-color-white,
///    h-border--expanded-hover:             $su-color-digital-red-light,
///    h-border--expanded-active:            $su-color-white,
//) !default;
//
/// Styleguide: Variables.Components.nav-colors.variant-dark
//

$su-nav-colors--dark: (
  h-link:                               $su-color-white,
  h-link--hover:                        $su-color-white,
  h-link--active:                       $su-color-white,
  h-link--active-hover:                 $su-color-white,
  h-link--expanded:                     $su-color-white,
  h-link--expanded-hover:               $su-color-white,

  h-border--hover:                      $su-color-white,
  h-border--active:                     $su-color-digital-red-light,
  h-border--active-hover:               $su-color-white,
  h-border--expanded:                   $su-color-white,
  h-border--expanded-hover:             $su-color-digital-red-light,
  h-border--expanded-active:            $su-color-white,
) !default;

//
/// $su-nav-colors--light
//
/// Color map for the Main Nav and Secondary Nav light variants.
//
/// Markup: $su-nav-colors--light: (
///    bg:                          $su-color-white,
///    divider:                     #d9d9d9,
///    link:                        $su-color-black,
///    link--hover:                 $su-color-black,
///    link--active:                $su-color-digital-red,
///    link--expanded:              $su-color-black,
///    border--hover:               $su-color-black,
///    border--active:              $su-color-digital-red,
///    border--expanded:            transparent,
///    border--active-expanded:     $su-color-black,
///    h-link:                      $su-color-black,
///    h-link--hover:               $su-color-digital-red,
///    h-link--active:              $su-color-black,
///    h-link--active-hover:        $su-color-digital-red,
///    h-link--expanded:            $su-color-black,
///    h-border--hover:             $su-color-digital-red,
///    h-border--active:            $su-color-black,
///    h-border--current:           $su-color-foggy-dark,
///    h-border--active-hover:      $su-color-digital-red,
///    h-border--expanded:          $su-color-foggy-dark,
//) !default;
//
/// Styleguide: Variables.Components.nav-colors.variant-light
//

$su-nav-colors--light: (
  bg:                          $su-color-white,
  divider:                     #d9d9d9,

  link:                        $su-color-black,
  link--hover:                 $su-color-black,
  link--active:                $su-color-digital-red,
  link--expanded:              $su-color-black,

  border--hover:               $su-color-black,
  border--active:              $su-color-digital-red,
  border--expanded:            transparent,
  border--active-expanded:     $su-color-black,

  h-link:                      $su-color-black,
  h-link--hover:               $su-color-digital-red,
  h-link--active:              $su-color-black,
  h-link--active-hover:        $su-color-digital-red,
  h-link--expanded:            $su-color-black,

  h-border--hover:             $su-color-digital-red,
  h-border--active:            $su-color-black,
  /// In this variant current and active state have different border colors
  h-border--current:           $su-color-foggy-dark,
  h-border--active-hover:      $su-color-digital-red,
  h-border--expanded:          $su-color-foggy-dark,
) !default;