Variable names building

$k-[molecule]-[modifier]-[child]-[type]-[state]-[style]: ... !default;

1. [molecule]: Name or short-name for the molecule / element you are styling
2. [modifier]: Does the molecule / element have a modifier? Place it second
3. [child]: just one level deep. distinguishing `$k-navigation-border` from `$k-naviagtion-item-border` and `$k-navigation-lin-border'
4. [type]: for example `small`, `big`, `bold`,  `class` etc.
5. [state]: States like `active`, `disabled` etc.
6. [style]: Name of the CSS style for example `background-image`, `line-height`, `z-indez` etc.

// examples

// [style] (for base variables)
$k-font-weight: bold !default 

// ([state])[type] (for base variables)
$k-active-class: .active !default;

// [type]-[style]
$k-small-line-height: 12px !default;

// [molecule]
$k-navigation: true !default;

// [molecule]-[style]
$k-navigation-background: white !default;

// [molecule]-[modifier]
$k-navigation-round: true !default;

// [molecule]-[modifier]-[style]
$k-navigation-round-border-radius: 4px !default;

// [molecule]-[child]-[style]
$k-navigation-item-background: white !default;

// [molecule]-[child]-[state]-[style]
$k-navigation-item-hover-background: white !default;

// [molecule]-[child]-[state]-[type]
$k-navigation-item-active-class: $k-active-class !default;

// [molecule]-[child]-[type]-[state]-[style]
$k-navigation-item-small-hover-background: grey !default;

// [molecule]-[modifier]-[child]-[type]-[state]-[style]
$k-navigation-round-item-small-hover-background: grey !default;