// desktop authenticated account dropdown styling
$avatar-height: 35px;
$avatar-width: 35px;
$avatar-sm-width: 70px;

$user_info-max_width: 100px;
$user_info-max_width-sm: 70px;
$user_info-max_width-xs: 50px;
$user_info-name-max_width: 200px;
$user_info-icon-vertical_alignment: -2px;
$user_info-toggle-hover_transition: color 0.15s ease-in-out;

$padding-small-horizontal: 3px;

.navigation-user_info {
  height: 100%;
  margin-top: 7px;

  @media (min-width: $screen-md) {
    margin-right: 15px;
  }
}

// Dont show user info close btn when in mobile offcanvas
.nav-mobile-menu.in .nav-mobile-menu-close {
  @media (max-width: $grid-float-breakpoint) {
    order: 1;// .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
  }

  &.nav-user_info-close {
    @media (max-width: $grid-float-breakpoint) {
      display: none;
    }
  }
}

.navigation-user_info-icon {
  margin-top: $user_info-icon-vertical_alignment;
  transition: $user_info-toggle-hover_transition;
}

.navigation-user_info-avatar {
  height: $avatar-height;
  width: $avatar-width;
  margin-right: $padding-default-horizontal;
  box-shadow: none;
  border: none;
}

.navigation-user_info-user_name {
  margin-right: $padding-small-horizontal;
  max-width: $user_info-max_width;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: $user_info-toggle-hover_transition;

  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
    max-width: $user_info-max_width-xs;
  }
  @media (min-width: $screen-md_to_lg-plus) and (max-width: $screen-lg-plus) {
    max-width: $user_info-max_width-sm;
  }
}

// Account Dropdown / Popover
.navigation-account_dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  height: 100%;
  overflow-y: hidden;

  @media (max-width: $grid-float-breakpoint) {
    display: none;
  }

  &:hover {
    .navigation-user_info-user_name,
    .navigation-user_info-icon {
      color: $color-secondary;
    }
  }
}

.navigation-account_dropdown {
  @media (min-width: $grid-float-breakpoint) {
    @include off-canvas-style;
  }
}

.navigation-account_dropdown-avatar {
  min-width: $avatar-sm-width; // fixes an ie 11 flexbug
  margin: 0;
  margin-right: $padding-large-horizontal;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: none;
  padding: 0;
}

.navigation-account_dropdown-user_info {
  direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior
  display: flex;
  align-items: center;
  padding-bottom: $padding-large-vertical;
  border-bottom: 2px solid $color-gray-200;
}

.navigation-account_dropdown-user_info-logged_in {
  width: 100%;
  text-align: left;
  flex: 1 1 auto; //ensures consistent display in ie 10
}

.navigation-account_dropdown-user_info-logged_in-name {
  display: inline-block;
  max-width: $user_info-name-max_width;
  line-height: 1.1; // just a little tighter for multi line names
  word-wrap: break-word;
}

.navigation-account_dropdown-storage_bar {
  height: 10px;
  border-radius: 50px;
  background-color: $color-gray-300;
  margin-top: $padding-xs-vertical;
  margin-bottom: $padding-small-vertical;
  width: 100%;
}

.navigation-account_dropdown-storage_bar-percent_used {
  border-radius: 50px;
  height: 100%;
}

.navigation-account_dropdown-list {
  padding-top: $padding-small-vertical;
  padding-bottom: $padding-small-vertical;
  margin-bottom: 0;
  text-align: left;

  &:not(:last-of-type) {
    border-bottom: 2px solid $color-gray-200;
  }
}

a.navigation-account_dropdown-list-item {
  display: block;
  position: relative;
  padding-top: $padding-small-vertical;
  padding-bottom: $padding-small-vertical;
  margin-left: -$padding-large-horizontal;
  margin-right: -$padding-large-horizontal;
  padding-left: $padding-large-horizontal;
  padding-right: $padding-large-horizontal;
  color: $color-gray-600;
  text-decoration: none;

  &:hover {
    color: $color-secondary;
  }
}

.navigation-account_dropdown-list-item-sign_out {
  color: $color-danger !important;
}

.navigation-account_dropdown-list-item:not(:last-of-type) {
  border-bottom: none;
}