@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  src: Url("/assets/fonts/Manrope-VariableFont_wght.ttf");
  font-family: "Manrope";
}

html {
  position: relative;
  min-height: 100%;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
}

body {
  font-family: "Manrope", sans-serif !important;
}

.main-content {
  min-height: 100vh;
  @apply flex flex-col items-center justify-center max-w-3xl w-full px-3 sm:px-5;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

.button {
  padding-top: 9px;
  padding-bottom: 9px;
  @apply px-4 rounded-lg font-semibold text-sm text-center;
}

.button:disabled {
  @apply opacity-50;
}

.button--primary,
.button--primary:hover {
  text-decoration: none;
  @apply bg-saphire text-white border border-saphire;
}

.button--secondary,
.button--secondary:hover {
  text-decoration: none;
  @apply bg-neutral-200 border border-neutral-300 text-neutral-700;
}

.button--destructive,
.button--destructive:hover {
  text-decoration: none;
  @apply border text-red-3 border-red-3 bg-neutral-100;
}

.link,
.link:hover {
  @apply text-neutral-700 font-semibold underline;
}

.checkbox__wrapper {
  @apply flex items-center;
}

.checkbox__input {
  @apply mr-1 rounded;
}

.alert {
  @apply p-4 rounded-lg font-bold;
}

.alert--warning {
  @apply text-neutral-700 border border-orange;
}

.alert--danger {
  @apply text-neutral-700 border border-red-3;
}

.alert--success {
  @apply text-neutral-600 border border-green  bg-neutral-200;
}

.form-wrapper {
  @apply w-full max-w-md flex flex-1 flex-col items-center justify-center;
  @apply sm:w-[28rem];
}

.form-control {
  @apply block w-full px-3 py-1 h-10 border-2 border-neutral-300  rounded-lg;
}

.password-control {
  scroll-margin-top: 25px;
  @apply block w-full pl-3 pr-12 py-1 h-10 border-2 border-neutral-300 rounded-lg;
}

.password-view-btn {
  @apply absolute right-1 top-1/2 -translate-y-1/2 py-2 px-1 rounded bg-neutral-300;
}

.form-control::placeholder {
  @apply text-neutral-500;
}

.form-spacer {
  @apply border border-neutral-300 w-full;
}

.form-label {
  @apply mb-1 text-neutral-700 font-bold text-sm;
}

.header1 {
  @apply text-4xl font-light text-neutral-700;
}

.header2 {
  @apply text-3xl  text-neutral-700;
}

.header3 {
  @apply text-xl  text-neutral-700;
}
.header4 {
  @apply text-lg  text-neutral-700;
}

.text--body {
  @apply text-sm text-neutral-700 font-semibold;
}

.text--subheading {
  @apply text-lg text-neutral-600 font-semibold;
}

.nav-link {
  padding-top: 9px;
  padding-bottom: 9px;
  @apply px-4 rounded-lg font-semibold text-sm;
  @apply border border-neutral-300 bg-neutral-200;
  @apply w-full h-full block;
}

.nav-item {
}
.profile-link--active,
.profile-link--active:hover {
  @apply bg-saphire-2 text-white rounded w-full h-full;
}

.text-danger {
  @apply text-red-3;
}

.missing-requirement {
  @apply text-neutral-600 font-semibold text-sm;
}

.met-requirement {
  @apply text-green font-bold text-sm;
}

.password-icon {
  @apply inline-block mr-2;
}