Checkmate/Client/src/Pages/Auth/index.css

/* ////// */
/* SHARED */
/* ////// */
.set-new-password-page,
.password-confirmed-page {
  display: flex;
  justify-content: center;
  height: var(--env-var-height-1);
}
.set-new-password-page h1.MuiTypography-root,
.password-confirmed-page h1.MuiTypography-root {
  font-size: var(--env-var-font-size-large);
  color: var(--env-var-color-1);
  font-weight: 600;
}
.set-new-password-page p.MuiTypography-root,
.set-new-password-page button,
.password-confirmed-page p.MuiTypography-root,
.password-confirmed-page button {
  font-size: var(--env-var-font-size-medium);
}
.set-new-password-page button:not(.MuiIconButton-root),
.password-confirmed-page button:not(.MuiIconButton-root) {
  height: 34px;
  border-radius: var(--env-var-radius-2);
  line-height: 0;
}

.set-new-password-form,
.password-confirmed-form {
  margin-top: 65px;
  width: var(--env-var-width-2);
}
.set-new-password-page p.MuiTypography-root,
.password-confirmed-page p.MuiTypography-root {
  color: var(--env-var-color-2);
}

.set-new-password-page button:not(.MuiIconButton-root) svg,
.password-confirmed-page button:not(.MuiIconButton-root) svg {
  margin-right: 5px;
}

.set-new-password-page
  .MuiFormControl-root:has(#register-password-input)
  + span.MuiTypography-root,
.password-confirmed-page
  .MuiFormControl-root:has(#register-password-input)
  + span.MuiTypography-root {
  display: none;
  visibility: hidden;
}

/* AUTH */
.auth {
  height: 100vh;
}
.auth h1 {
  font-size: var(--env-var-font-size-xlarge);
  font-weight: 600;
  color: var(--env-var-color-3);
}
.auth button:not(.MuiIconButton-root),
.auth .field h3.MuiTypography-root,
.auth .field input,
.auth .field .input-error,
.auth p,
.auth span {
  font-size: var(--env-var-font-size-medium-plus);
}
.auth p {
  color: var(--env-var-color-2-light);
}
.auth .field h3.MuiTypography-root,
.auth .field input {
  color: var(--env-var-color-5);
}

.auth p + span {
  color: var(--env-var-color-3);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 300ms ease-in;
}
.auth p > span {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: all 200ms;
}
.auth p > span:hover {
  color: var(--env-var-color-2);
  text-underline-offset: 4px;
}
.auth p + span:hover {
  opacity: 1;
}
.auth button:not(.MuiIconButton-root) {
  user-select: none;
  border-radius: var(--env-var-radius-2);
  line-height: 1;
}
.auth button:not(.MuiIconButton-root),
.auth .field .MuiInputBase-root:has(input) {
  height: 38px;
}
.auth .field svg {
  width: 24px;
  height: 24px;
}
.auth .check span.MuiTypography-root {
  font-size: var(--env-var-font-size-medium);
}

.auth > .MuiStack-root:nth-of-type(1) {
  height: var(--env-var-nav-bar-height);
}
.auth .background-pattern-svg {
  top: 14%;
  width: 100%;
  max-width: 800px;
}

.forgot-password-page h1,
.check-email-page h1 {
  font-size: var(--env-var-font-size-large-plus);
}