$top-bar-class: '#{$prefix}-top-bar';
$top-bar-mobile-class: '#{$prefix}-tb-mobile';

$top-bar__height--desktop: rem-calc(80);
$top-nav-font-size-mobile: rem-calc(14);

$brand-image__size: rem-calc(36);
$brand__font-size: rem-calc(16);

$brand-image__size--medium: rem-calc(36);
$brand__font-size--medium: rem-calc(20);

$brand-image__size--large: rem-calc(48);

// variables for mobile slide out menu
$brand-image__size--mobile: rem-calc(24);
$brand__font-size--mobile: rem-calc(20);
$brand__line-hight--mobile: rem-calc(32);

$brand-anchor__padding: rem-calc(16);
$brand-anchor__padding--medium: rem-calc(14);
$brand-anchor__padding--large: rem-calc(12);

$top-bar__background-color--dark: $md-gray-90;
$top-bar__background-color--light: $md-white-100;
$top-bar__background-color--blue: $md-theme-50;

$top-bar__font-color--dark: $md-white-100;
$top-bar__font-color--light: inherit;

$top-bar__font-color--dark--active: $md-theme-50;
$top-bar__font-color--light--active: $md-theme-60;
$top-bar__font-color--blue--active: $md-black-100;

$top-bar-list-item__padding--mobile: rem-calc(32);
$top-bar-list-item__background: transparent;

$top-bar-avatar__size: rem-calc(36);