/* src/frontend/css/set-user.css */
.page.set-user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  gap: 1rem;
  width: 30rem;
  max-width: calc(100% - 2rem);
  margin: auto;

  & > * {
    width: 100%;
  }

  & > input {
    text-align: center;
    color: var(--text);
    background-color: var(--bg-alt);
    outline: none;
    border: none;
    border-radius: 1rem;
    padding: 1rem;
    font-family: monospace;
    font-size: 125%;
  }

  & > button {
    outline: none;
    background-color: #0000;
    border-radius: 1rem;
    padding: 1rem;

    &:disabled {
      background-color: var(--bg-alt);
      border: none;
    }

    &:not(:disabled) {
      color: var(--text);
      border: 2px solid var(--accent);
    }
  }
}