// desktop authenticated account dropdown styling
$avatar-height: 35px;
$avatar-width: 35px;
$user_info-max_width: 100px;
$user_info-max_width-sm: 70px;
$user_info-max_width-xs: 50px;

$mobile-menu-active-bar-offset: -11px;
$padding-small-horizontal: 3px;

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

  &.open {
    .navigation-user_info-icon {
      transform: rotate(180deg);
    }
  }

  @media (max-width: $grid-float-breakpoint) {
    display: none; // hides dropdown on mobile
  }

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

.navigation-user_info-icon {
  margin-top: -3px; // magic number to vertical align
}

.navigation-user_info-avatar { // avatar in nav
  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: transform 0.15s ease-in-out;

  @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;
  transition: opacity 0.15s ease-in-out;

  &:hover {
    opacity: 0.7;
  }
}

.navigation-account_dropdown {
  position: absolute;
  background-color: $color-white;
  box-shadow: 0 5px 20px rgba(0,0,0,.1);
  top: calc(100% + 20px);
  right: $nav-horizontal-spacing;
  padding: $padding-large-vertical $padding-large-horizontal;
  padding-bottom: 0;
  width: 300px;

  &::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid $color-white;
  }

  &.open {
    display: block;
  }
}

.navigation-account_dropdown-avatar {
  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;
}

.user_info-logged_in-account_dropdown-storage {
  width: 100%;
  text-align: left;
}

.navigation-account_dropdown-storage_bar {
  height: 10px;
  border-radius: 50px;
  background: $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;
  background: $color-forever_services;
  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;

  &::before {
    @media screen and (min-width: $screen-xs) {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 4px;
      background-color: $color-secondary;
      content: "";
      transform: scaleX(0);
      transition: transform 0.15s ease-in-out;
      transform-origin: left;
    }
    @media screen and (max-width: $grid-float-breakpoint) {
      left: $mobile-menu-active-bar-offset;
    }
  }

  &:hover {
    color: $color-secondary;

    &::before {
      transform: scaleX(1);
      transition: transform 0.25s ease-in-out;
    }
  }
}

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

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