/* Sign-in department field: matches the sign-in text inputs in both themes. */
.login-department-group select {
  width: 100%;
  min-height: 46px;
  padding: 0 40px 0 13px;
  border: 1px solid var(--login-line);
  border-radius: 8px;
  background-color: oklch(99% 0.004 248);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--login-ink);
  font: 700 1rem/1.2 var(--login-font);
  appearance: none;
  -webkit-appearance: none;
}

.login-department-group select:hover {
  border-color: oklch(74% 0.035 248);
}

.login-department-group select:focus {
  outline: none;
}

.login-department-group select:focus-visible {
  outline: 3px solid oklch(70% 0.12 248 / 58%);
  outline-offset: 3px;
}

.login-department-group select:disabled {
  opacity: 0.72;
  cursor: default;
}

.login-department-status {
  margin: 0;
  color: var(--login-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.login-department-status:empty {
  display: none;
}

html[data-theme="dark"] .login-department-group select {
  background-color: oklch(14% 0.032 248);
  color: var(--login-ink);
  box-shadow: inset 0 1px 0 oklch(76% 0.02 248 / 5%);
}

html[data-theme="dark"] .login-department-group select:hover {
  border-color: oklch(52% 0.055 248);
}