// ProfileMenu: an auto-height, anchored account menu that hangs off the header's
// right side. Unlike the full-height `bx--header-panel`, the card sizes to its
// content. Colors come from theme tokens so the menu themes per active theme;
// because the card renders as a descendant of the header, the classic variant's
// g100 token scope makes it dark automatically (see _ui-shell-classic.scss).

@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// ProfileMenu component styles (trigger, anchored card, rows).
/// @access private
/// @group ui-shell
@mixin profile-menu {
  //--------------------------------------------------------------------------
  // Trigger
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__trigger.#{$prefix}--profile-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  //--------------------------------------------------------------------------
  // Avatar (shared frame; sized per context)
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background-color: $background-hover;
    color: $icon-primary;
  }

  // Direct-child scope so a slotted UserAvatar (which nests its own icon/img)
  // fills the frame without the frame stretching its inner glyph.
  .#{$prefix}--profile-menu__avatar > img,
  .#{$prefix}--profile-menu__avatar > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .#{$prefix}--profile-menu__trigger .#{$prefix}--profile-menu__avatar {
    width: 2rem;
    height: 2rem;
  }

  .#{$prefix}--profile-menu__header .#{$prefix}--profile-menu__avatar {
    width: 2.5rem;
    height: 2.5rem;
  }

  //--------------------------------------------------------------------------
  // Card
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu.#{$prefix}--profile-menu {
    position: absolute;
    top: 3rem;
    right: 0;
    z-index: 9000;
    width: 20rem;
    max-width: 100vw;
    // Scroll within the card when the menu is taller than the viewport.
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 0;
    background-color: $layer;
    color: $text-secondary;
    border: 1px solid $border-subtle;
    border-top: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  }

  //--------------------------------------------------------------------------
  // Header block ("View profile")
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__header {
    display: flex;
    flex-direction: column;
    gap: $spacing-05;
    padding: $spacing-05;
    color: $text-primary;
    text-decoration: none;
  }

  .#{$prefix}--profile-menu__header--link {
    cursor: pointer;
    transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--profile-menu__header--link:hover {
    background-color: $background-hover;
  }

  .#{$prefix}--profile-menu__header--link:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  .#{$prefix}--profile-menu__identity {
    display: flex;
    align-items: center;
    gap: $spacing-04;
  }

  .#{$prefix}--profile-menu__meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .#{$prefix}--profile-menu__name {
    @include type-style('productive-heading-01');
    color: $text-primary;
  }

  .#{$prefix}--profile-menu__username {
    @include type-style('body-short-01');
    color: $text-secondary;
  }

  .#{$prefix}--profile-menu__view {
    @include type-style('body-short-01');
    color: $text-primary;
  }

  //--------------------------------------------------------------------------
  // List (compact group of items with even top/bottom padding)
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__list {
    display: flex;
    flex-direction: column;
    padding: $spacing-03 0;
  }

  //--------------------------------------------------------------------------
  // Item (link or button)
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__item.#{$prefix}--profile-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2rem;
    margin: 0;
    padding: 0 $spacing-05;
    color: $text-secondary;
    text-align: left;
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    @include type-style('body-short-01');
    transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--profile-menu__item.#{$prefix}--profile-menu__item:hover {
    color: $text-primary;
    background-color: $background-hover;
  }

  .#{$prefix}--profile-menu__item.#{$prefix}--profile-menu__item:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  .#{$prefix}--profile-menu__item svg {
    flex-shrink: 0;
    fill: $icon-primary;
  }

  //--------------------------------------------------------------------------
  // Detail row (label / value / trailing action)
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__detail {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: $spacing-05;
    padding: $spacing-05;
  }

  .#{$prefix}--profile-menu__detail-text {
    display: flex;
    flex-direction: column;
    gap: $spacing-02;
  }

  .#{$prefix}--profile-menu__detail-label {
    @include type-style('label-01');
    color: $text-secondary;
  }

  .#{$prefix}--profile-menu__detail-value {
    @include type-style('body-short-01');
    color: $text-primary;
  }

  .#{$prefix}--profile-menu__detail-action a,
  .#{$prefix}--profile-menu__detail-action button {
    @include type-style('body-short-01');
    padding: 0;
    color: $link-primary;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .#{$prefix}--profile-menu__detail-action a:hover,
  .#{$prefix}--profile-menu__detail-action button:hover {
    text-decoration: underline;
  }

  .#{$prefix}--profile-menu__detail-action a:focus,
  .#{$prefix}--profile-menu__detail-action button:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  //--------------------------------------------------------------------------
  // Divider
  //--------------------------------------------------------------------------
  .#{$prefix}--profile-menu__divider.#{$prefix}--profile-menu__divider {
    height: 1px;
    margin: 0;
    background-color: $border-subtle;
    border: none;
  }
}

@include exports("profile-menu") {
  @include profile-menu;
}