// Background color for the top bar
@use "sass:math";

$topbar-bg-color: $md-gray-90;
$topbar-bg: $md-white-100;
// Height and margin
$topbar-height: rem-calc(50);
$topbar-margin-bottom: 0;
// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal;
$topbar-title-font-size: rem-calc(17);
// Set the link colors and styles for top-level nav
$topbar-link-color: $md-white-100;
$topbar-link-color-hover: $md-white-100;
$topbar-link-color-active: $md-white-100;
$topbar-link-color-active-hover: $md-white-100;
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
$topbar-link-hover-lightness: -10%;
// Darken by 10%
$topbar-link-bg: $topbar-bg;
$topbar-link-bg-hover: $md-gray-90;
$topbar-link-bg-color-hover: $md-gray-70;
$topbar-link-bg-active: $md-theme-50;
$topbar-link-bg-active-hover: scale-color($md-theme-50, $lightness: -14%);
$topbar-link-font-family: $body-font-family;
$topbar-link-text-transform: none;
$topbar-link-padding: math.div($topbar-height, 3);
$topbar-back-link-size: rem-calc(18);
$topbar-link-dropdown-padding: rem-calc(20);
$topbar-button-font-size: 0.75rem;
$topbar-button-top: 7px;
// Style the top bar dropdown elements
$topbar-dropdown-bg: $md-gray-90;
$topbar-dropdown-link-color: $md-white-100;
$topbar-dropdown-link-color-hover: $topbar-link-color-hover;
$topbar-dropdown-link-bg: $md-gray-90;
$topbar-dropdown-link-bg-hover: $md-gray-90;
$topbar-dropdown-link-weight: $font-weight-normal;
$topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: $md-white-100;
$topbar-dropdown-toggle-alpha: 0.4;
$topbar-dropdown-label-color: $md-gray-70;
$topbar-dropdown-label-text-transform: uppercase;
$topbar-dropdown-label-font-weight: $font-weight-bold;
$topbar-dropdown-label-font-size: rem-calc(10);
$topbar-dropdown-label-bg: $md-gray-90;
// Top menu icon styles
$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: rem-calc(13);
$topbar-menu-link-weight: $font-weight-bold;
$topbar-menu-link-color: $md-white-100;
$topbar-menu-icon-color: $md-white-100;
$topbar-menu-link-color-toggled: $md-gray-90;
$topbar-menu-icon-color-toggled: $md-gray-90;
$topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
// Transitions and breakpoint styles
$topbar-transition-speed: 300ms;
//Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range)};
// Change to 9999px for always mobile layout
$topbar-media-query: $medium-up;
// Top-bar input styles
$topbar-input-height: rem-calc(28);
// Divider Styles
$topbar-divider-border-bottom: solid 1px
  scale-color($topbar-bg-color, $lightness: 13%);
$topbar-divider-border-top: solid 1px
  scale-color($topbar-bg-color, $lightness: -50%);
// Sticky Class
$topbar-sticky-class: '.sticky';
$topbar-arrows: true;
//Set false to remove the triangle icon from the menu item
$topbar-dropdown-arrows: true;
// Accessibility mixins for hiding and showing the menu dropdown items
// Top Bar links
$top-bar-default-link-color: $md-gray-70;
$top-bar-default-link-hover-color: $md-gray-90;
$top-bar-default-link-hover-bg: $md-gray-20;
$top-bar-default-link-active-color: $md-white-100;
$top-bar-default-link-active-bg: $md-theme-50;
$top-bar-default-link-disabled-color: $md-gray-70;
$top-bar-default-link-disabled-bg: transparent;

// Inverted top-bar
// Reset inverted top-bar basics
$top-bar-inverse-border: $md-gray-90;

// Inverted top-bar links
$top-bar-inverse-link-color: $md-gray-70;
$top-bar-inverse-link-disabled-color: $md-black-100;

// Admin top-bar
// Reset Admin top-bar basics
$top-bar-admin-color: $md-gray-50;
$top-bar-admin-border: $md-gray-40;

// Admin Top Bar links
$top-bar-admin-link-color: $md-gray-70;
$top-bar-admin-link-hover-color: $md-black-100;
$top-bar-admin-link-hover-bg: $md-gray-20;
$top-bar-admin-link-active-color: $md-white-100;
$top-bar-admin-link-active-bg: $md-theme-50;
$top-bar-admin-link-disabled-color: $md-gray-70;
$top-bar-admin-link-disabled-bg: transparent;

// Admin Top Bar brand label
$top-bar-admin-brand-color: $md-gray-70;
$top-bar-admin-brand-hover-color: darken($top-bar-admin-brand-color, 10%);
$top-bar-admin-brand-hover-bg: transparent;

// Admin Top Bar toggle
$top-bar-admin-toggle-hover-bg: $md-gray-40;
$top-bar-admin-toggle-icon-bar-bg: $md-gray-40;
$top-bar-admin-toggle-border-color: $md-gray-40;

// Top Bar User Variables
$top-bar-user-height: rem-calc(68) !default;
$top-bar-mobile-height: rem-calc(48) !default;