:root {

  --login-panel-bg: rgb(165 165 165 / 38%);
  --login-panel-text: black;

  --login-container-bg: white;
  --login-container-shadow: #b7b7b7;

  --login-input-border: #a7a7a7;

  --login-button-primary-bg: #9bd8ff;
  --login-button-primary-active: #6fc8ff;
  --login-button-primary-hover: #88d1ff;

}

[data-theme='dark'] {

  --login-panel-bg: rgb(0 0 0 / 85%);
  --login-panel-text: #e2e5e3;

  --login-container-bg: black;
  --login-container-shadow: #1b1b1b;

  --login-input-border: #a3a3a3;

  --login-button-primary-bg: #1a83c4;
  --login-button-primary-active: #138ad3;
  --login-button-primary-hover: #3598d7;

}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;

  background-color: var(--login-panel-bg);
  color: var(--login-panel-text);

  overflow: hidden;
  padding: 2em;
}

.login-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-rows: min-content;
  grid-column-gap: 1em;
  grid-row-gap: 1em;

  background-color: var(--login-container-bg);
  border-radius: 0.5em;
  box-shadow: 0em 0.15em 0.5em 0.15em var(--login-container-shadow);
  margin-bottom: 5em;
  max-width: 100%;
  max-height: 100%;
  padding: 1em;
}

.login-input {
  outline: none;
  border: none;
  border-bottom: 1px solid var(--login-input-border);
}

.login-button {
  grid-column: 1 / -1;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5em;

  background-color: var(--login-button-primary-bg);
  border: none;
  border-radius: 0.5em;
  height: 2em;
  padding: 0.25em 0.5em;

  cursor: pointer;
}

.login-button:hover {
  background-color: var(--login-button-primary-hover);
}

.login-button:active {
  background-color: var(--login-button-primary-active);
}

.login-message {
  display: none;
  grid-column: 1 / -1;

  border: 1px solid red;
  border-radius: 0.25em;
  color: red;
  padding: 0.25em;

  font-size: smaller;
}

.login-status {
  display: none;
  grid-column: 1 / -1;

  font-size: smaller;
}

.login-spinner {
  display: none;
  box-sizing: border-box;

  border: 3px solid white;
  border-bottom-color: transparent;
  border-radius: 50%;

  width: 1em;
  height: 1em;

  animation: loginSpinnerAction 1s linear infinite;
}

.logging-in .login-input,
.logging-in .login-button {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.logging-in .login-spinner {
  display: block;
}

@keyframes loginSpinnerAction {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}