@use '../../scss/base/variables' as var;

.popoverContainer {
  display: flex;
  align-items: center;
  width: calc(100vw - 32px); // 32px accounts for 16px padding on each side
  padding: 0 16px;
  gap: 8px;

  &.expandedContainer {
    justify-content: space-between;
    @media only screen and (min-width: var.$breakpoint-md) {
      width: 260px; // This is the width of the expanded Sidebar - the 32px for the 16px of padding on each side
    }
  }

  .iconAndName {
    display: flex;
    align-items: center;
    gap: 8px;
    left: 0;
  }

  .maleUserIcon {
    position: relative;
    left: 6px; // Add 6px left to center the 20px icon in the 64px LeftNav (accounting for existing 16px padding)
    transition: left 0.25s ease-in-out;
  }

  .nameContainer {
    overflow: hidden;
  }

  .name {
    color: var(--purple);
    font-size: var(--font-size-12);
    text-transform: uppercase;
    animation-duration: 0.25s;
  }

  .carat {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
  }

  .rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
  }
}

.popover {
  padding: 0;
}

.popoverChildren {
  display: flex;
}

.sideDrawer {
  padding: 8px 0;
}

.disabledCursor {
  cursor: default;
}