// CSS for the authenticated user dynamic menbuar item

// Color theme for the item in the top menubar that represents
// the authenticated user.
// Boostrap5: $nav-tabs-link-active-color
$menubar-link-active-color:             #fff;
// Boostrap5: $nav-tabs-link-active-bg
$menubar-link-active-bg:                #3e7ebf;
// Boostrap5: $nav-link-padding-x
$menubar-nav-link-padding-x:            8px;
// Boostrap5: $nav-link-padding-y
$menubar-nav-link-padding-y:            8px;
$menubar-link-dropdown-toggle-y:        3px;
$menubar-caret-width:                   .3em !default;


// Color theme for the dropdown menu with links to 'Home' and 'Settings'
// for all profiles the authenticated user has a role on.
$menubar-dropdown-color:                #000;
$menubar-dropdown-bg:                   #fff;
$menubar-dropdown-color-dark:           #fff;
$menubar-dropdown-bg-dark:              #000;

$menubar-dropdown-role-color:           #fff;
$menubar-dropdown-role-bg:              #3e7ebf !default;

// Boostrap5: var(--bs-dropdown-border-width)
$menubar-dropdown-border-width:         1px;
// Boostrap5: var(--bs-dropdown-border-color)
$menubar-dropdown-border-color:         rgba(0,0,0,0.175);
// Bootstrap5: $dropdown-link-hover-bg
$menubar-dropdown-link-hover-bg:        #f8f9fa !default;
// Bootstrap5: $dropdown-link-active-bg
$menubar-dropdown-link-active-bg:       #3e7ebf !default;

:root,
[data-bs-theme="light"] {
    --menubar-dropdown-bg: #{$menubar-dropdown-bg};
    --menubar-dropdown-color: #{$menubar-dropdown-color};
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --menubar-dropdown-bg: #{$menubar-dropdown-bg-dark};
    --menubar-dropdown-color: #{$menubar-dropdown-color-dark};
}

.menubar {
    position: relative;
    align-self: center !important;
    color: $menubar-link-active-color;
}

.menubar-label {
    color: $menubar-link-active-color;
    padding: $menubar-nav-link-padding-y $menubar-nav-link-padding-x;
    text-decoration: none;
    display:block;

    &:hover,
    &:focus {
        text-decoration: none;
        color: $menubar-link-active-bg;
        background-color: $menubar-link-active-color;
    }
}

.menubar-label > div {
    display: inline-block;
    line-height:1rem;
    vertical-align: middle;
}

.menubar-label-title {
    display: block;
    padding-bottom: 0;
}

.menubar-label-subtitle {
}

.menubar-label-expanded {
}

.menubar-label.menubar-label-dropdown-toggle {
  white-space: nowrap;
  text-decoration: none;
  padding-top: $menubar-link-dropdown-toggle-y;
  padding-bottom: $menubar-link-dropdown-toggle-y;

  // Generate the caret automatically
  // Bootstrap5  @include caret(down);
  &::after {
      display: inline-block;
      vertical-align: middle;
      content: "";
      border-top: $menubar-caret-width solid;
      border-right: $menubar-caret-width solid transparent;
      border-bottom: 0;
      border-left: $menubar-caret-width solid transparent;
    }
}

.menubar-label.menubar-label-dropdown-toggle:after {
  vertical-align: middle;
}

.menubar-dropdown-menu
{
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    white-space: nowrap;
    background-clip: padding-box;
    border: $menubar-dropdown-border-width solid $menubar-dropdown-border-color;
    border-radius: 0.25rem;
    color: var(--menubar-dropdown-color);
    background-color: var(--menubar-dropdown-bg);
}

.menubar-dropdown-menu.show
{
    display: block;
    position: absolute;
}

.menubar-dropdown-menu .menubar-dropdown-label
{
    text-transform: lowercase;
    padding: 2px 0 7px 10px;
    font-size: 13px;
}

.menubar-dropdown-menu .menubar-dropdown-label > * {
    display: inline-block;
    vertical-align: middle;
}

.menubar-dropdown-menu .menubar-dropdown-label .menubar-dropdown-label-role
{
    margin-left: 10px;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 12px;
    display: inline-block;
    color: $menubar-dropdown-role-color;
    background: $menubar-dropdown-role-bg;
}

.menubar-dropdown-menu .menubar-dropdown-item {
    display: block;
    padding: 0.25rem 1.5rem;
    padding-left: 2.75rem;
    position: relative;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    border: 0;
    text-decoration: none;

  &:hover,
  &:focus {
    background-color: $menubar-dropdown-link-hover-bg;
    text-decoration: none;
  }

  &.active,
  &:active {
    background-color: $menubar-dropdown-link-active-bg;
    text-decoration: none;
  }

  &.disabled,
  &:disabled {
    pointer-events: none;
    background-color: transparent;
  }
}


.menubar-dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: $menubar-dropdown-border-width solid $menubar-dropdown-border-color;
}

.menubar-sign-out {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 16px;
    border: 2px solid;
    border-right: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.menubar-sign-out::after,
.menubar-sign-out::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}

.menubar-sign-out::after {
    border-top: 2px solid;
    border-left: 2px solid;
    transform: rotate(135deg);
    width: 8px;
    height: 8px;
    left: 4px;
    bottom: 2px
}
.menubar-sign-out::before {
    border-radius: 3px;
    width: 10px;
    height: 2px;
    background: currentColor;
    left: 2px;
    bottom: 5px
}

.avatar-top {
    height: 32px;
    width: 32px;
    vertical-align: baseline;
    border-radius: 50%;
}

.avatar {
    position: absolute;
    left: 15px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

// Boostrap5: media-breakpoint-down(md)
@media (max-width: 768px) {
    .menubar-label .menubar-label-expanded {
        display: none;
        margin-right: 0.5rem !important;
    }
}


[data-trnc]
{
    width: 0 !important;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    visibility: hidden;
}
