_profile-menu.scss

// 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 {
  .#{$prefix}--profile-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .#{$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: to-rem(32px);
    height: to-rem(32px);
  }

  .#{$prefix}--profile-menu__header .#{$prefix}--profile-menu__avatar {
    width: to-rem(40px);
    height: to-rem(40px);
  }

  .#{$prefix}--profile-menu {
    position: absolute;
    top: to-rem(48px);
    right: 0;
    z-index: 9000;
    width: to-rem(320px);
    // The header's width, which leaves out a classic scrollbar. `100vw`
    // counts it, so the card ran off the far edge by its width.
    max-width: 100%;
    // Scroll within the card when the menu is taller than the viewport.
    max-height: calc(100vh - to-rem(48px));
    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);
  }

  .#{$prefix}--profile-menu__header {
    display: flex;
    flex-direction: column;
    gap: $carbon--spacing-05;
    padding: $carbon--spacing-05;
    color: $text-primary;
    text-decoration: none;
  }

  .#{$prefix}--profile-menu__header--link {
    cursor: pointer;
    transition: background-color $duration--fast-01 motion(standard, productive);
  }

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

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

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

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

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

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

  .#{$prefix}--profile-menu__list {
    display: flex;
    flex-direction: column;
    padding: $carbon--spacing-03 0;
  }

  .#{$prefix}--profile-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    // Tall enough to fit a leading `sm` (1.5rem) avatar with breathing room.
    min-height: to-rem(40px);
    margin: 0;
    padding: 0 $carbon--spacing-05;
    color: $text-secondary;
    text-align: left;
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    @include type-style('body-compact-01');
    transition: background-color $duration--fast-01 motion(standard, productive);
  }

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

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

  // `min-width: 0` lets this flex child shrink below its content size, which
  // `.#{$prefix}--profile-menu__item-text` needs in order to truncate instead
  // of forcing the row (and the menu) wider.
  .#{$prefix}--profile-menu__item-label {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    gap: $carbon--spacing-03;
  }

  .#{$prefix}--profile-menu__item-avatar {
    display: flex;
    flex-shrink: 0;
  }

  .#{$prefix}--profile-menu__item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  //--------------------------------------------------------------------------
  // Detail row (label / value / trailing action)
  //--------------------------------------------------------------------------

  .#{$prefix}--profile-menu__detail {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: $carbon--spacing-05;
    padding: $carbon--spacing-05;
  }

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

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

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

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

  // Hover only where a pointer can hover, so a tap does not leave it stuck.
  @media (any-hover: hover) {
    .#{$prefix}--profile-menu__header--link:hover {
      background-color: $background-hover;
    }

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

    .#{$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;
  }

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

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