// desktop authenticated account dropdown styling
$avatar-size-nav: 35px;
$avatar-size-offcanvas: 80px;
$avatar-offcanvas-visual-alignment: -10px;

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

$padding-small-horizontal: 3px;

$cart-with-count-offset: 10px; //offsets .navigation-user_info-cart-with_count when there is a signed in user

$forever-club-badge-size: 50px;
$forever-club-badge-position: -30px;

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

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

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

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

    .navbar-toggle {
      @media (min-width: $grid-float-breakpoint) {
        display: block;
      }
    }
  }
}

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

.navigation-user_info-avatar {
  margin-right: $padding-default-horizontal / 2;
  border: none;

  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
    padding-left: $cart-with-count-offset;
  }

  .avatar {
    height: $avatar-size-nav;
    width: $avatar-size-nav;
    min-width: $avatar-size-nav;
  }
}

// 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-max) {
    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-size-offcanvas; // fixes an ie 11 flexbug
  margin: 0;
  margin-left: $avatar-offcanvas-visual-alignment;
  margin-right: $padding-large-horizontal;
  padding: 0;
  flex-shrink: 0;

  .avatar {
    width: $avatar-size-offcanvas;
    height: $avatar-size-offcanvas;
  }
}

.navigation-account_dropdown-user {
  direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior
  padding-bottom: $padding-large-vertical - 5;
  border-bottom: 2px solid $color-gray-200;
}

.navigation-account_dropdown-user_info {
  display: flex;
  align-items: center;
}

.navigation-account_dropdown-user_info-club-image {
  position: absolute;
  max-width: $forever-club-badge-size;
  height: $forever-club-badge-size;
  margin-top: $forever-club-badge-position;
}

.navigation-account_dropdown-user-club_status {
  margin-top: 30px;
  line-height: 1;
}

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