/*@container queries*/
/* hiChar styles
Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
*/
:host {
  display: inline-grid;
  justify-items: end;
  block-size: 100%;
}

.dropdown::part(expandable-button) {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  gap: var(--spacing-gap-l);
  block-size: auto;
  cursor: pointer;
}

.user-login__details {
  display: grid;
  grid-template-rows: max-content max-content;
  gap: var(--spacing-gap-xs);
  justify-items: end;
}
.user-login__name {
  font-weight: var(--font-style-semi-bold);
  font-size: var(--font-size-body-s);
  color: var(--color-text-neutral-default);
}
.user-login__name, .user-login__organization {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 120px;
  display: inline-block;
  line-height: 1 !important;
}
.user-login__avatar {
  font-size: 9px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 24px;
  inline-size: 24px;
  color: var(--color-text-neutral-default);
  border-radius: 50%;
  background-color: var(--color-accent-neutral-contrast);
  border: 1px solid var(--color-border-primary-on-default);
}
.user-login__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
}
.user-login__footer :where(button, a) {
  all: unset;
  display: inline-flex;
  align-items: center;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}
.user-login__footer button:disabled {
  pointer-events: none;
}
.user-login__footer .agreement-link {
  text-decoration: underline;
  cursor: pointer;
  /* Ensure it still looks clickable */
}