.container {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}
.user-data {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}
.user-data pos-picture {
  --width: 40px;
  --height: 40px;
  --border-radius: 50%;
}

pos-login-form {
  margin: var(--size-2);
}

dialog {
  margin-top: var(--size-10);
}

button#login,
button#logout {
  outline: none;
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-xl);
  border: none;
  box-sizing: border-box;
  border-radius: var(--radius-xs);
  padding: var(--size-2);
  box-shadow: var(--shadow-sm);
  color: var(--pos-primary-text-color);
  background-color: var(--pos-primary-color);
}

button#login:focus-within,
button#logout:focus-within {
  outline: var(--pos-input-focus-outline);
}

button#login:focus,
button#login:hover,
button#logout:focus,
button#logout:hover {
  filter: brightness(110%);
  box-shadow: var(--shadow-md);
}