/* ==================================================
   NX BUTTON BASE
================================================== */

.nx-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;

  min-height: 48px !important;
  padding: 0 1.5rem !important;

  border-radius: .625rem !important;

  font-family: var(--font-primary) !important;
  font-size: .95rem !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;

  text-decoration: none !important;
  cursor: pointer !important;

  box-sizing: border-box !important;

  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease !important;
}


/* ==================================================
   NX BUTTON GLASS
================================================== */

.nx-btn-glass{
  border: 1px solid rgba(255,255,255,.12) !important;

  background: rgba(255,255,255,.06) !important;
  color: #fff !important;

  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.16) !important;
}

.nx-btn-glass:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;

  transform: translateY(-2px) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 12px 30px rgba(0,0,0,.22) !important;
}

.nx-btn-glass:active{
  transform: translateY(0) !important;
}

.nx-btn-glass:focus-visible{
  outline: 2px solid rgba(255,255,255,.25) !important;
  outline-offset: 3px !important;
}


/* ==================================================
   NX BUTTON PRIMARY
================================================== */

.nx-btn-primary{
  border: none !important;

  background: #9DE500 !important;
  color: #0F1115 !important;
}

.nx-btn-primary:hover{
  background: #B4F41F !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 24px rgba(157,229,0,.28) !important;
}

.nx-btn-primary:active{
  transform: translateY(0) !important;
}

.nx-btn-primary:focus-visible{
  outline: 2px solid rgba(157,229,0,.45) !important;
  outline-offset: 3px !important;
}