@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/fonts';

.logged-user-details {
  position: relative;
}

.logged-user-name {
  position: relative;
  padding-right: 1em;
  color: var(--pix-neutral-500);
  font-weight: var(--pix-font-medium);
  font-size: 1rem;

  &:hover {
    color: var(--pix-neutral-800);
  }

  &::after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-80%) translateX(-2px) rotate(45deg);
    content: '';
  }

  &[aria-expanded="true"]::after {
    transform: translateY(-30%) translateX(-2px)  rotate(-135deg);
  }
}

/* Popover menu */
.logged-user-menu {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 999;
  min-width: 240px;
  max-width: 380px;
  overflow: hidden;
  background-color: var(--pix-neutral-0);
  border-radius: 4px;
  box-shadow:
    0 1px 1px 0 rgb(60 64 67 / 8%),
    0 1px 3px 1px rgb(60 64 67 / 16%);

  &__details {
    padding: 12px 16px;
    color: var(--pix-neutral-800);
    background-color: var(--pix-neutral-20);
  }

  &__actions {
    margin: 0;
    padding-left: 0;

    & > li {
      list-style: none;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: var(--pix-spacing-2x);
  }
}

.logged-user-menu-details__fullname {
  overflow: hidden;
  font-weight: var(--pix-font-bold);
  font-size: 1rem;
  white-space: nowrap;
  text-transform: capitalize;
  text-overflow: ellipsis;
}

.logged-user-menu__link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--pix-neutral-800);
  font-size: 0.938rem;
  border-top: 1px solid var(--pix-neutral-20);
  transition: background-color 0.1s linear;

  &:hover {
    color: var(--pix-neutral-800);
    text-decoration: none;
    background-color: var(--pix-neutral-20);
  }
}
